หลังจากทำการ review code ระบบงานที่พัฒนาด้วยภาษา JavaScript พบว่ามีคำถามที่ทำให้งง ๆ ไปพักใหญ่ ๆ คือ
ทั้งสามอย่างนี้มันต่างกันอย่างไร เราควรใช้อะไรดี
ปกติที่ใช้งาน จะทำการ auto format ด้วย Prettier plugin ใน VS Code
ซึ่งจะใช้งาน Double quote โดย default เลย จะมีค่าเดียวกับ ESLintแต่ตัวอื่น ๆ ก็มีใช้ Single quote เป็นค่า default เช่นกัน และเราก็สามารถ config ได้เองอีกด้วย
การใช้งานนั้น แนะนำให้เป็นไปในทิศทางเดียวกัน ไม่ใช่ต่างคนต่างใช้งานตามอารมณ์ แต่ละตัวใช้งานกันอย่างไร ในกรณีไหนบ้าง ?
จากคำถามเหล่านี้ ก็เลยกลับไปดู code ที่เคยเขียนไปว่าเป็นอย่างไร ก็พบว่า ส่วนใหญ่ใช้งาน Double quote และ Backtick เป็นหลัก ส่วน Single quote ไม่ค่อยได้ใช้เลย ดังนั้นไปดูความแตกต่างกันหน่อย
ถ้าข้อมูลเป็นแบบ multiline หรือหลาย ๆ บรรทัด
หรือ template ต่าง ๆ จะใช้งาน Backtick ดังนี้
const template = ` first line ${number1} second line ${number2} third line ${number3} `;
ถ้าเป็นการเชื่อมต่อ string ชอบใช้ Double quote และ + แต่หลัง ๆ มาก็เริ่มใช้งาน Backtick ด้วย ดังนี้
const world = "World"; const message1 = "Hello " + world + "!!!" const message2 = `Hello ${world} !!!`
ว่าง ๆ ลองทำ benchmark ของการใช้ทั้ง 3 แบบ เพื่อ assign ข้อมูลว่าเป็นอย่างไร ผลที่ได้คือ Backtick เร็วสุด ว่าแต่จะทำไปทำไมนะ 555 ว่างจัดจริง ๆ
const MAX_TIME = 1000000; function testDoubleQuotes() { console.time("Double quote"); for (let i = 0; i < MAX_TIME; i++) { const string1 = "String One"; } console.timeEnd("Double quote"); } // ===== ผลการทำงานของทั้ง 3 แบบ. ===== Double quote: 3.288ms Single quote: 2.132ms Backtick: 1.876ms