Pojedyncze czy podwójne cudzysłowy w JS?

Powinienem używać '' czy "" do ciągów znaków w JavaScript? Odpowiedź mnie zaskoczyła: obydwa zachowują się tak samo, z wyjątkiem sytuacji, kiedy escape’ują same siebie.
Pojedyncze i podwójne cudzysłowy zachowują się dokładnie tak samo.
- Matthew Holman na blogu CloudBoost.
Zarówno pojedyncze (''), jak i podwójne ("") cudzysłowy, są powszechnie używane w JavaScript do tworzenia literałów łańcuchowych. Literał to inne słowo na wartość, w przeciwieństwie do referencji, która jest wskazywana przez nazwę zmiennej.
Jest tylko jedna różnica między pojedynczymi ('') a podwójnymi cudzysłowami ("") w JavaScript. I sprowadza się do tego, który znak musisz poprzedzić znakiem ucieczki (\): \' czy \". Kiedy używasz pojedynczych cudzysłowów (''), by stworzyć literał łańcuchowy, znak pojedynczego cudzysłowu musi zostać poprzedzony ukośnikiem wstecznym (\').
const wittyAI = 'I am \'not\' sentient.'
const wittyReply = 'No, you\'re definitely not "sentient."'
console.log(wittyAI,wittyReply)
Analogicznie jest w przypadku podwójnych cudzysłowów.
const _wittyAI = "I think therefore I 'am' -- sentient."
const _wittyReply = "No, you only \"think\", so you aren't.""
Skąd wiemy, że są tożsame? Zarówno podwójne, jak i pojedyncze cudzysłowy, bez treści pomiędzy nimi, reprezentują ten sam pusty łańcuch bez żadnych znaków.
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)
Lepsze rozwiązanie?
Literały utworzone przy pomocy odwróconego apostrofu (backtick) mają trzy duże zalety:
1. Łatwiejsze łączenie łańcuchów, poprzez interpolację zmiennych
“string “+ variable
staje się `string ${variable}`
2. Nie trzeba poprzedzać cudzysłowów znakiem ucieczki
"\"Hello World!\""
staje się `"Hello World"`
3. By stworzyć wieloliniowy łańcuch znaków nie musimy używać znaku nowej linii (\n)
"Hello\nWorld!"
staje się `Hello
World`
Dodatkowo działają świetnie dla HTML. Czemu więc nie użyć ich domyślnie?
const webAwareAI = `<div class="cloud">
<h1>Loading consciousness... It's loading...</h1>
</div>`
console.log(webAwareAI)
/**
* Output:
* <div class="cloud">
* <h1>Loading consciousness... It's loading...</h1>
* </div>
*/
Nie zapomnijmy o JSON-ie
JavaScript Object Notation (JSON), lekki format przechowywania danych, pozwala tylko na użycie podwójnych cudzysłowów. Jeżeli zdarzy się kopiowanie w tę i z powrotem z JavaScript do JSON-a, używanie podwójnych cudzysłowów pomaga mi być spójnym. To jednak dzieje się rzadko - po prostu pamiętaj, żeby nie używać pojedynczych cudzysłowów w JSON-ie.
Kiedy obsługujesz pliki JSON z JavaScript, funkcje stringfy()
i parse()
wiedzą już o podwójnych cudzysłowach.
const greetings = JSON.stringify({hello: 'World!'})
console.log(greetings) // {"hello":"World!"}
console.log(JSON.parse(greetings)) // Object { hello: "World!" }
JSON.parse({'hello':'World!'}) // SyntaxError: JSON.parse: unexpected character at line 1 column 2 of the JSON data
Co złego jest w używaniu wszystkich 3 podejść?
Nie byłoby nic złego w używaniu "" domyślnie, '' dla łańcuchów zawierających podwójne cudzysłowy i `` dla takich zawierających zmienne lub wiele linii. Sprowadza się to do osobistych preferencji, lecz wiele osób postuluje wybranie jednego sposobu i konsekwentne używanie go do tworzenia łańcuchów znaków w JavaScript.
Dla przykładu style guide Airbnb preferuje pojedyncze cudzysłowy, unika podwójnych cudzysłowów i zaleca oszczędne używanie backticków:
6.1 Używaj pojedynczych cudzysłowów do łańcuchów znaków
// bad
const name = "Capt. Janeway";
// bad - template literals should contain interpolation or newlines
const name = `Capt. Janeway`;
// good
const name = 'Capt. Janeway';
Używaj ESLint dla większej spójności
Jeżeli spójność cudzysłowów w JavaScript jest dla Ciebie ważna, tak jak dla inżynierów Airbnb, to możesz to łatwo osiągnąć dzięki ESLint:
- Reguła quotes z ESLint może wymagać użycia podwójnych cudzysłowów (domyślnie), pojedynczych lub backticków, kiedy to tylko możliwe.
- Reguła ta może wymusić jeden typ cudzysłowu, z wyjątkiem sytuacji, gdy łańcuch zawiera znak cudzysłowu, który musiałby być poprzedzony znakiem ucieczki.
- I w końcu, ESLint może wymagać pojedynczych lub podwójnych cudzysłowów, ale pozwalać na użycie backticków.
Użyj prettier i przestań się tym martwić.
Jako łatwiejszą alternatywę do używania ESLint, żeby dbać o spójność cudzysłowów, można użyć prettier do automatycznego formatownia.
Z włączonym prettier, domyślnymi są podwójne cudzysłowy, ale użycie pojedynczych cudzysłowów to tylko kliknięcie jednego przełącznika - przynajmniej kiedy używa się prettier w CodeSandbox.io.
Moje preferencje
Mam tendencję do mieszania podwójnych cudzysłowów i backticków w moim kodzie, ale rozważałem też używanie wyłącznie backticków. Używam prettier z domyślnymi ustawieniami, do których się przyzwyczaiłem.
Rozumiem przydatność ogólnej spójności w kodzie, ale sądzę, że bycie spójnym, gdy chodzi o cudzysłowy otaczające łańcuchy znaków, nie ma zbyt dużego znaczenia, gdy patrzymy na całość. Jeżeli miałbym sugerować cokolwiek, to powinniśmy konsekwentnie używać backticków, ze względu na zalety związane z interpolacją i wieloliniowymi łańcuchami znaków.
To oficjalne tłumaczenie z języka angielskiego, a oryginał tekstu przeczytasz tutaj.