เครื่องแปลงตัวพิมพ์ (camel, snake
พิมพ์ข้อความใดก็ได้และดูการแปลงสิบแบบเคียงกัน แต่ละแบบมีปุ่มคัดลอก เหมาะสำหรับการเปลี่ยนชื่อตัวแปร ชื่อไฟล์ หัวเรื่อง slug และการทำความสะอาดชุดข้อมูล
hello world example
HELLO WORLD EXAMPLE
Hello World Example
Hello world example
helloWorldExample
HelloWorldExample
hello_world_example
hello-world-example
HELLO_WORLD_EXAMPLE
HELLO WORLD EXAMPLE
วิธีการทำงาน
แต่ละสไตล์ใช้ที่ไหน
camelCase: ตัวระบุใน JavaScript และ Java (myVariableName) PascalCase: คลาสและ React component (UserProfile) snake_case: ตัวแปรใน Python และ Ruby (user_profile) kebab-case: URL และคลาส CSS (user-profile) CONSTANT_CASE: environment variable และค่าคงที่ (USER_PROFILE)
Title Case: หัวเรื่องหนังสือและบทความ หัวข้อ Sentence case: ป้ายกำกับ UI และหัวข้อสมัยใหม่ส่วนใหญ่ อ่านง่ายกว่า Title Case สำหรับข้อความยาว UPPERCASE: การเน้น ตัวย่อ lowercase: แท็ก ป้าย ชื่อไฟล์ที่ต้องไม่ sensitive ต่อตัวพิมพ์
วิธีที่เครื่องแปลงแยกคำ
เราแยกที่ช่องว่าง ขีดกลาง ขีดล่าง เครื่องหมายทับ และจุด เราแยกที่ขอบเขตระหว่างตัวอักษรพิมพ์เล็กและพิมพ์ใหญ่ด้วย (ดังนั้น 'helloWorld' แยกเป็น ['hello', 'World']) และระหว่างตัวอักษรและตัวเลข สิ่งนี้จัดการกรณีส่วนใหญ่ในชีวิตประจำวัน รวมถึง code ที่วาง slug และ path ของไฟล์
กรณีพิเศษ: ตัวย่อตัวพิมพ์ใหญ่ทั้งหมด ('XMLHTTPRequest') ไม่แยกอย่างชัดเจนโดยไม่มีบริบท ดังนั้นเราถือว่าตัวพิมพ์ใหญ่ที่ต่อเนื่องกันเป็นบล็อกคำเดียวและพึ่งผู้ใช้ทำความสะอาดหากจำเป็น สำหรับข้อความทั่วไปในชีวิตประจำวัน เช่น ประโยค หัวเรื่อง ชื่อคอลัมน์ชุดข้อมูล parser ให้ผลลัพธ์ที่คาดหวัง
เคล็ดลับสำหรับ code review และ refactoring
เมื่อย้ายระหว่างภาษา ให้วางรายการชื่อตัวระบุและคัดลอกเวอร์ชันที่แปลงแล้ว snake-to-camel เป็นขอบเขต JavaScript-to-Python ที่พบบ่อยที่สุด kebab-to-snake พบบ่อยเมื่อ refactoring HTML attribute เป็น JS object
สำหรับ SEO slug kebab-case คือมาตรฐาน อ่านได้ใน URL และ Google ถือว่าขีดกลางเป็นตัวคั่นคำ (ขีดล่างไม่ใช่) 'product-name' ดีกว่า 'product_name' สำหรับ URL path ที่ผู้ใช้เห็น
คำถามที่พบบ่อย
›ถ้าอินพุตมีตัวย่อเช่น 'XML' ล่ะ?
ตัวพิมพ์ใหญ่ที่ต่อเนื่องกันถือเป็นบล็อกเดียว 'XMLParser' แยกเป็น 'XML' และ 'Parser' สิ่งนี้ใช้ได้สำหรับ code ส่วนใหญ่ ตรวจสอบและแก้ไขด้วยมือสำหรับกรณีพิเศษ
›ทำไม URL slug จึงใช้ kebab-case เสมอ?
ขีดกลางถือเป็นขอบเขตคำโดย URL parser ของ Google ขีดล่างไม่ใช่ URL แบบ kebab-case index ได้น่าเชื่อถือกว่าสำหรับ SEO
›Title case กับ Sentence case ต่างกันอย่างไร?
Title Case ใส่ตัวพิมพ์ใหญ่ที่คำส่วนใหญ่ ('The Quick Brown Fox') Sentence case ใส่ตัวพิมพ์ใหญ่เฉพาะคำแรกและคำนามเฉพาะ ('The quick brown fox') UI สมัยใหม่มักชอบ Sentence case
›รองรับ Unicode หรือไม่?
ใช่ toLowerCase/toUpperCase ของ JavaScript รองรับ Unicode ตัวอักษรที่มีเครื่องหมายกำกับและ script ที่ไม่ใช่ Latin ผ่านไปอย่างถูกต้อง
›สามารถแปลงกลับได้หรือไม่?
ได้ วางผลลัพธ์ที่แปลงแบบใดก็ตามกลับเข้าไปและใช้การแปลงที่แตกต่าง การแปลงไปกลับ camelCase ↔ snake_case ไม่สูญเสียข้อมูล
›ทำไม camelCase จึงไม่เก็บตัวย่อในตัวพิมพ์ใหญ่?
ตามธรรมเนียม camelCase ใส่ตัวพิมพ์ใหญ่เฉพาะตัวอักษรแรกของแต่ละคำถัดไป 'XmlHttpRequest' เป็นที่นิยมมากกว่า 'XMLHTTPRequest' ใน style guide สมัยใหม่
›ข้อมูลออกไปจากเบราว์เซอร์หรือไม่?
ไม่ การแปลงทั้งหมดทำงานในเครื่อง
›มีวิธีแปลงจำนวนมากพร้อมกันหรือไม่?
วางรายการทั้งหมดพร้อมกัน แต่ละบรรทัดถือเป็นอินพุตแยกต่างหากภายใต้ style เดียวกัน แปลงแล้วแยกบรรทัดตามต้องการ
เครื่องมือที่เกี่ยวข้อง
อัปเดตล่าสุด: