Перевод статьи «The real difference between ‘single quotes’ and “double quotes” in JavaScript».
Какие кавычки стоит использовать в 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 я использую с дефолтными установками для двойных кавычек — просто привык к этому.
Хотя я осознаю пользу единообразия в коде, я не думаю, что кавычки играют в этом очень уж большую роль.
Но если придется выбирать, думаю, стоит остановиться на обратных кавычках, поскольку шаблонные литералы имеют преимущества вроде интерполяции и многострочности.
[customscript]techrocks_custom_after_post_html[/customscript]
[customscript]techrocks_custom_script[/customscript]
