Nasza strona używa cookies. Korzystając ze strony, wyrażasz zgodę na używanie cookies, zgodnie z aktualnymi ustawieniami przeglądarki. Rozumiem

Pojedyncze czy podwójne cudzysłowy w JS?

Dr. Derek Austin Full-Stack JavaScript Developer
Sprawdź, w jaki sposób najlepiej zapisywać literały łańcuchowe - z pojedynczym lub podwójnym cudzysłowem, czy z apostrofem wstecznym.
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.

Lubisz dzielić się wiedzą i chcesz zostać autorem?

Podziel się wiedzą z 160 tysiącami naszych czytelników

Dowiedz się więcej