Как поставить обратные кавычки в js на клавиатуре

Как работают шаблонные литералы JavaScript ES6

Спецификация ECMAScript 2015 (ES6) предоставляет нам новый механизм создания строковых значений – возможность использовать шаблонные литералы для строковой интерполяции и многострочных строк. Шаблонные литералы также часто называют шаблонными строками, это одно и то же.

Шаблонный литерал умеет все то же, что и обычная строка – следовательно, обычные строки в коде можно вообще не использовать. Шаблонные литералы могут заменить их без каких-либо потерь для кода. Однако, как правило, использование шаблонных литералов ограничивается спецификациями по написанию кода: согласно этим документам, их следует применять только там, где нужны их расширенные возможности.

Для объявления шаблонных литералов в JavaScript есть специальный символ – это обратные кавычки (`). На большинстве клавиатур этот символ можно поставить при помощи клавиши, которая находится справа от клавиши 1.

Давайте рассмотрим такой пример строковой интерполяции с помощью шаблонных литералов:

function greeting(firstName, lastName) < let message = `Hello $$`; return message; >

А в этом случае шаблонный литерал используется с многострочной строкой:

console.log(`Right now is the perfect time to learn JavaScript`);

Вот еще один пример – строковая интерполяция и многострочные строки с шаблонными литералами:

var user = < name: "Joe", email: "joe@example.com" >; var item = < quantity: 3, price: 4.99 >; var message = `Name: $ Email: $ Total price: $`;

Вышеприведенный пример кода выведет в консоль следующее сообщение:

Name: Joe Email: joe@example.com ----- Total price: 14.97

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

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

Перевод статьи «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 $`

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

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

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

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

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

const webAwareAI = ` 
Loading consciousness. It's loading.
 
` console.log(webAwareAI) /** * Output: * 
* 
Loading consciousness. It's loading.
 *
 */

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

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

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

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

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

const greetings = JSON.stringify() console.log(greetings) // console.log(JSON.parse(greetings)) // Object < Hello: "World!" >// JSON requires double quotes: JSON.parse("") // Object < Hello: "World!" >JSON.parse(``) // Object < Hello: "World!" >try < JSON.parse("") > catch(e) < console.log(e) >// SyntaxError: JSON.parse: expected property name or '>' at line 1 column 2 of the JSON data try < JSON.parse("") > 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 я использую с дефолтными установками для двойных кавычек — просто привык к этому.

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

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

Mac 13″ обратная кавычка на клавиатуре mac c кодом 96 — ` как?

• macOS
• +2 ещё

Можно ли купить операционную систему macOS?

• 1 подписчик
• 04 янв.
• 163 просмотра

• macOS
• +2 ещё

Возможно ли восстановить удаленные файлы в макбуке?

• 1 подписчик
• 12 дек. 2023
• 138 просмотров

• MacBook
• +1 ещё

Перестала работать клавиатура на MacBook Pro 15 2015. Как исправить?

• 1 подписчик
• 07 дек. 2023
• 76 просмотров

• MacBook

Нормально ли то, что при закрытии крышки MacBook Air M2 слышен легкий щелчок в левой петле?

• нет подписчиков
• 01 дек. 2023
• 181 просмотр

• MacBook

Подойдет ли Macbook pro 2013 для программирования в веб разработке?

• 1 подписчик
• 14 нояб. 2023
• 484 просмотра

• macOS
• +3 ещё

Невозможно исправить аппаратное декодирование в Хромиумах и Фаерфоке на макОС?

• 1 подписчик
• 12 нояб. 2023
• 96 просмотров

• macOS
• +1 ещё

Как восстановить файлы на MacBook 2016 pro Touch Bar без macOS и разбитым экраном?

• 1 подписчик
• 07 нояб. 2023
• 131 просмотр

• MacBook
• +2 ещё

Какой хаб выбрать для displayport?

• 1 подписчик
• 07 нояб. 2023
• 169 просмотров

• macOS
• +3 ещё

Как настроить показ Push уведомлений из iPhone на Macbook?

• 5 подписчиков
• 28 окт. 2023
• 180 просмотров

• macOS
• +2 ещё

Mac os: Как в libreOffice двойным пробелом поставить точку?

• 2 подписчика
• 26 окт. 2023
• 75 просмотров

от 110 000 до 170 000 ₽

от 140 000 до 150 000 ₽

До 250 000 ₽

09 янв. 2024, в 22:51

10000 руб./за проект

09 янв. 2024, в 21:58

30000 руб./за проект

09 янв. 2024, в 21:50

10000 руб./за проект

Минуточку внимания

Присоединяйтесь к сообществу, чтобы узнавать новое и делиться знаниями

• Отличается ли з/п в США для кандидатов находящиеся на территории США или за её пределами?
  • 2 подписчика
  • 2 ответа
  • 2 подписчика
  • 1 ответ
  • 2 подписчика
  • 0 ответов
  • 2 подписчика
  • 3 ответа
  • 2 подписчика
  • 1 ответ
  • 2 подписчика
  • 1 ответ
  • 2 подписчика
  • 1 ответ
  • 2 подписчика
  • 1 ответ
  • 2 подписчика
  • 1 ответ
  • 2 подписчика
  • 4 ответа

  ES6: Интерполяция

  Если вы используете в своей работе Sass, или любой другой CSS-препроцессор, то понятие интерполяции вам уже знакомо:

  // Интерполяция в scss $var: 'awesome'; .#$var>-selector  display: flex; > // CSS код после компиляции .awesome-selector  display: flex; > 

  Интерполяция в JavaScript работает схожим образом. В строке создаётся конструкция $ <. >, внутри которой вы можете поместить любую переменную или выражение:

  var age = 25; console.log(`I am $age> years old`); // I am 25 years old // Эквивалентно console.log('I am ' + age + 'years old'); // I am 25 years old

  Важно: строки, созданные с помощью обычных кавычек ( ‘ и » ) не поддерживают интерполяцию. Для поддержки интерполяции следует использовать обратную кавычку ` (клавиша ё на клавиатуре):

  var age = 25; // С обычными кавычками интерполяция не поддерживается console.log('I am $ years old'); // I am $ years old console.log("I am $ years old"); // I am $ years old // Поддерживается только с обратными console.log(`I am $age> years old`); // I am 25 years old

  Интерполяция выражений

  С помощью интерполяции в строку можно поместить результат выполнения любого выражения, например, вызов функции:

  const up = (str) => str.toUpperCase(); let str = `this is $ up('sting') > in uppercase`; console.log(str); // this is STRING in uppercase

  или более сложных выражений:

  const sum = (. args) => `Sum is equal $args.reduce((start, arg) => start + arg, 0)>`; console.log(sum(12, 23, 32)); // Sum is equal 67

  Вложенная интерполяция

  Скорее всего, будут возникать ситуации, когда одного уровня интерполяции будет недостаточно. В подобных случаях удобно пользоваться вложенностью (интерполяция внутри интерполяции). Следует помнить, что весь код, находящийся внутри $ <. >интерпретируется, как отдельное выражение, то есть может содержать обратные кавычки, которые не будут восприняты, как конец строки:

  const up = (str) => str.toUpperCase(); let user = 'user'; let str = `these $s`)> are great`; console.log(str); // these USERS are great 

  В переменной str используется вложенная интерполяция. Используя, старый стандарт код можно переписать следующим образом:

  var user = 'user'; var str = 'these ' + up(user + 's') + ' are great'; console.log(str); // these USERS are great

  Похожие публикации:

  1. Как передать адрес переменной в функцию c
  2. Как проверить новый айфон на оригинальность
  3. Как проверить целостность torrent файлов в tribler
  4. Как установить матлаб без ключа