Khi làm việc với JavaScript, chắc hẳn đã có lúc bạn thắc mắc là. "Không sử dụng dấu nháy đơn hay dấu nháy kép" chưa?

Để trả lời cho câu hỏi trên thì ta phải hiểu là 'dấu nháy đơn' và "dấu ngoặc kép" nó làm việc gì, sự khác nhau giữa chúng. Và trong bài viết này chúng ta cùng tìm hiểu về nó nhé. Được, đi thôi

II. Nội dung

Trong JavaScript, cả dấu ngoặc đơn [''] và dấu ngoặc kép [""] đều được sử dụng thường xuyên để tạo chuỗi ký tự

“Dấu nháy đơn và nháy kép hoạt động giống hệt nhau trong JavaScript. ” — Matthew Holman trong CloudBoost

Dấu nháy đơn và dấu nháy kép hoạt động giống nhau trong JavaScript. Ngoại trừ, có một điểm khác biệt duy nhất là sử dụng dấu gạch chéo ngược [\] trong đó

'Dấu nháy đơn "thoát" dấu nháy đơn'

Khi sử dụng dấu nháy đơn [''] để tạo một Chuỗi ký tự, ký tự dấu nháy đơn cần phải thoát bằng cách sử dụng dấu gạch chéo ngược [']. Ví dụ

const wittyAI = 'I am \'not\' sentient.'
const wittyReply = 'No, you\'re definitely not "sentient."'
console.log[wittyAI,wittyReply]
------------------------------------------------------------------
Output: I am 'not' sentient. No, you're definitely not "sentient."

“Dấu ngoặc kép 'thoát' dấu ngoặc kép"

Khi sử dụng dấu ngoặc kép để tạo một chuỗi ký tự, ký tự dấu ngoặc kép cần phải thoát bằng dấu backslack ["]. Ví dụ

const _wittyAI = "I think therefore I 'am' -- sentient."
const _wittyReply = "No, you only \"think\", so you aren't."
console.log[_wittyAI,_wittyReply]
------------------------------------------------------------------
Output: I think therefore I 'am' -- sentient. No, you only "think", so you aren't.

"Trống rỗng" === 'Trống rỗng'

Cả dấu ngoặc đơn và dấu ngoặc kép đều có thể đại diện cho một chuỗi trống không chứa bất kỳ ký tự nào

const empty = ""
const alsoEmpty = ''
console.log[empty === alsoEmpty] // true [both are empty string]
console.log[empty.length] // 0

console.log[empty === false] // false
console.log[empty === 0] // false
console.log[empty == false] // true [falsy comparison]
console.log[empty == 0] // true [falsy comparison]

const _wittyAI = "I think therefore I 'am' -- sentient."
const _wittyReply = "No, you only \"think\", so you aren't."
console.log[_wittyAI,_wittyReply]
------------------------------------------------------------------
Output: I think therefore I 'am' -- sentient. No, you only "think", so you aren't.

Có một tính năng mới trong ES6 được gọi là mẫu chữ hoặc chữ đánh dấu ngược hoặc chữ đánh dấu ngược [``], sử dụng nó thay thế cho dấu nháy đơn và dấu nháy kép

“Chữ mẫu là chữ chuỗi cho phép các biểu thức được nhúng. Bạn có thể sử dụng các tính năng nội suy chuỗi và chuỗi nhiều dòng với chúng. ” - Tài liệu MDN

Backticks là một String Literal cho phép nhúng các biểu thức, có thể viết chuỗi thành nhiều dòng và các chuỗi tính năng suy diễn

Sử dụng backtick [``] có 3 lợi ích lớn

1. Nối chuỗi dễ dàng hơn [nội suy biến]

"string " + variable => `string ${variable}`

1. Không cần thoát [

   
   const _wittyAI = "I think therefore I 'am' -- sentient."
   const _wittyReply = "No, you only \"think\", so you aren't."
   console.log[_wittyAI,_wittyReply]
   ------------------------------------------------------------------
   Output: I think therefore I 'am' -- sentient. No, you only "think", so you aren't.
   

   9] dấu ngoặc đơn hoặc dấu ngoặc kép

"\"Hello World!\"" => `"Hello World"`

1. Có thể viết chuỗi thành nhiều dòng mà không cần sử dụng

   const empty = ""
   const alsoEmpty = ''
   console.log[empty === alsoEmpty] // true [both are empty string]
   console.log[empty.length] // 0
   
   console.log[empty === false] // false
   console.log[empty === 0] // false
   console.log[empty == false] // true [falsy comparison]
   console.log[empty == 0] // true [falsy comparison]
   

   0

Backticks cũng làm tốt với HTML

const webAwareAI = `

Loading consciousness.. It's loading...
`
console.log[webAwareAI]

/**
 *  Output:
 *  

 *  
Loading consciousness.. It's loading...
 *  
 */

Về tốc độ của Backticks Literal cũng tương đương với các String Literal khác [tại đây], cho dù có biên dịch nó bằng Babel hay không. Với những điểm mạnh nêu trên, vậy tại sao không sử dụng backticks trong tất cả các trường hợp?

Đừng quên JSON

JSON - định dạng lưu trữ dữ liệu nhẹ - chỉ cho phép sử dụng dấu ngoặc kép. Vì thế nếu sao chép qua lại từ JavaScript sang tệp JSON, chỉ cần sử dụng dấu ngoặc kép sẽ giúp ta thống nhất

const greetings = JSON.stringify[{Hello: 'World!'}]
console.log[greetings] // {"Hello":"World!"}
console.log[JSON.parse[greetings]] // Object { Hello: "World!" }

// JSON requires double quotes:
JSON.parse["{\"Hello\":\"World!\"}"] // Object { Hello: "World!" }
JSON.parse[`{"Hello":"World"}`] // Object { Hello: "World!" }
try {
  JSON.parse["{'Hello':\"World!\"}"] 
} catch[e] { console.log[e] } // SyntaxError: JSON.parse: expected property name or '}' at line 1 column 2 of the JSON data
try {
  JSON.parse["{\"Hello\":'World!'}"] 
} catch[e] { console.log[e] } // SyntaxError: JSON.parse: unexpected character at line 1 column 10 of the JSON data

Như trong đoạn mã ví dụ trên, dấu nháy đơn gây ra lỗi cú pháp cho hàm JSON. phân tích cú pháp []. Lý do kỹ thuật liên quan đến đặc tả JSON , yêu cầu dấu ngoặc kép cho chuỗi ký tự JSON

Có điều gì sai khi sử dụng cả 3 không?

Sẽ không có gì sai khi sử dụng dấu nháy kép [""] theo mặc định, sử dụng dấu nháy đơn [''] để bao dấu ngoặc kép và dấu nháy ngược [] để bao gồm biến và nhiều dòng. Nó thuộc về sở thích của cá nhân

Ví dụ, thích sử dụng dấu ngoặc đơn, tránh dấu ngoặc kép và sử dụng một cách siêu dữ liệu backticks theo nghĩa đen

// bad
const name = "Capt. Janeway";
// bad - template literals should contain interpolation or newlines
const name = `Capt. Janeway`;
// good
const name = 'Capt. Janeway';

Lời khuyên. Sử dụng ESLint hoặc Prettire để đảm bảo tính nhất quán

Nếu bạn muốn đảm bảo tính nhất quán trong mã, bạn có thể dễ dàng cấu hình với ESLint hoặc sử dụng Prettier

III. Tổng kết

Như vậy, cả dấu nháy đơn, dấu nháy kép đều hoạt động giống nhau. Ngoài ra, ta cũng có thể sử dụng backticks để thay thế, trong các trường hợp nhất định. Việc sử dụng loại nào là do style của từng dev sao cho mã nhất quán