Одинарные, двойные и обратные кавычки в JavaScript

0
1190
views
javascript logo

Хочешь проверить свои знания по JS?

Подпишись на наш канал с тестами по JS в Telegram!

×

Перевод статьи «The real difference between ‘single quotes’ and “double quotes” in JavaScript».

Photo by Vlada Karpovich from Pexels

Какие кавычки стоит использовать в JavaScript: одинарные или двойные? Ответ меня удивил: эти варианты совершенно идентичны, если не рассматривать вопрос экранирования.

«В JavaScript одинарные и двойные кавычки ведут себя совершенно одинаково», — пишет Мэтью Холман в своей статье на cloudboost.io.

И одинарные, и двойные кавычки в коде на JS используются довольно часто. С их помощью создаются строковые литералы.

«Литерал» — это просто еще одно слово, которым обозначается значение переменной (в то время как имя переменной — это ссылка).

Единственная разница между одинарными и двойными кавычками в JS связана с экранированием кавычек внутри строковых литералов.

Одинарные кавычки

Если строковый литерал образован при помощи одинарных кавычек (''), другие одинарные кавычки внутри него нужно экранировать при помощи обратного слэша (\').

const wittyAI = 'I am \'not\' sentient.'
const wittyReply = 'No, you\'re definitely not "sentient."'
console.log(wittyAI,wittyReply)

Двойные кавычки

Аналогично, если строковый литерал образован при помощи двойных кавычек (""), другие двойные кавычки внутри него тоже нужно экранировать при помощи обратного слэша (\').

const _wittyAI = "I think therefore I 'am' -- sentient."
const _wittyReply = "No, you only \"think\", so you aren't."
console.log(_wittyAI,_wittyReply)

Примечание редакции Techrocks. Экранирование не требуется, если для создания литерала вы использовали один тип кавычек, а внутри него — другой.

«Empty» === ‘Empty’

Пара двойных или одинарных кавычек может представлять пустую строку, не содержащую никаких символов.

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)

Не лучше ли использовать обратные кавычки?

В ES6 появились шаблонные литералы, которые создаются при помощи обратных кавычек (``).

«Шаблонными литералами называются строковые литералы, допускающие использование выражений внутри. С ними вы можете использовать многострочные литералы и строковую интерполяцию», — MDN.

Эти литералы имеют три больших преимущества:

1. Более простая конкатенация («интерполяция переменных»)

"string "+variable превращается в `string ${variable}`

2. Отпадает необходимость экранировать одинарные или двойные кавычки

"\"Hello World!\"" превращается в `"Hello World"`

3. Многострочный код можно писать без символов новой строки (\n)

"Hello\nWorld!" превращается в `Hello
World`

Обратные кавычки также больше подходят для HTML:

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>
 */

Шаблонные литералы не уступают по скорости строковым. Так почему бы не использовать повсеместно обратные кавычки?

Не забывайте о JSON

Легковесный формат хранения данных JSON допускает использование только двойных кавычек.

Если мне нужно постоянно копировать код из JavaScript в файлы JSON и обратно, использование двойных кавычек поможет поддерживать единообразие. Это случается довольно редко, так что мне приходится напоминать себе не использовать одинарные кавычки в JSON.

Функции stringify() и parse(), которые используются для работы с файлами JSON внутри JavaScript, знают о двойных кавычках:

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

Как видно из примера, одинарные кавычки мешают распарсить JSON.

С технической точки зрения причина этого — в спецификации JSON (RFC 7159), где есть требование использования именно двойных кавычек.

Почему бы не использовать все три вида кавычек?

Да, нет ничего дурного в том, чтобы использовать двойные кавычки по умолчанию, одинарные — внутри строк, если там они нужны по смыслу, а обратные — для включения переменных или написания многострочных литералов.

Все сводится к личным предпочтениям, хотя многие люди выступают за то, чтобы остановиться на каком-то одном варианте и использовать исключительно его.

Например, руководство по стилю Airbnb предписывает отдавать предпочтение одинарным кавычкам, избегать использования двойных, а обратные использовать пореже.

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

Для обеспечения единообразия используйте ESLint

Если последовательность стиля имеет для вас значение (как и для разработчиков Airbnb), ее легко обеспечить при помощи ESLint:

  • Правило quotes в ESLint может требовать использования двойных кавычек (по умолчанию), а одинарных или обратных — там, где это возможно.
  • Это правило также может требовать применения только одного вида кавычек. (За исключением случаев, если строка содержит символ кавычки, который придется экранировать).
  • Наконец, ESLint может требовать использования одинарных или двойных кавычек и при этом допускать использование обратных для создания шаблонных литералов.

Используйте Prettier и вообще забудьте об этой проблеме

Более простое решение, чем использовать ESLint для обеспечения единообразия стиля, — использовать Prettier для автоматического форматирования.

В Prettier по умолчанию используются двойные кавычки. Но его можно легко переключить на использование одинарных (по крайней мере, в CodeSandbox.io).

Для Prettier также есть соответствующее расширение в VSCode.

Мои личные предпочтения

В своем коде я склонен использовать двойные и обратные кавычки, хотя подумываю об использовании исключительно обратных.

Prettier я использую с дефолтными установками для двойных кавычек — просто привык к этому.

Хотя я осознаю пользу единообразия в коде, я не думаю, что кавычки играют в этом очень уж большую роль.

Но если придется выбирать, думаю, стоит остановиться на обратных кавычках, поскольку шаблонные литералы имеют преимущества вроде интерполяции и многострочности.