ยืนงงในดง “, ‘ และ ` สำหรับ JavaScript

หลังจากทำการ review code ระบบงานที่พัฒนาด้วยภาษา JavaScript พบว่ามีคำถามที่ทำให้งง ๆ ไปพักใหญ่ ๆ คือ

• Double quote ( “” )
• Single quote (”)
• Backtick (“)

ทั้งสามอย่างนี้มันต่างกันอย่างไร เราควรใช้อะไรดี

ปกติที่ใช้งาน จะทำการ 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