Использование и разница между ` и ' в JavaScript

Быстрый ответ

В JavaScript обратные кавычки (` ) используются для форматирования шаблонных литералов, что облегчает вставку переменных и выражений в строку с помощью ${...}. Благодаря этому, упрощается создание многострочных текстов.

Взгляните на пример:

let product = 'кофе';
let price = 2.99;
// Элегантное объединение строк 👦🏻🦾
console.log(`Один ${product} стоит $${price}.`); // Результат: Один кофе стоит $2.99.

Возможности, которые дают обратные кавычки

Интерполяция строк

С использованием обратных кавычек в строки можно вносить выражения JavaScript, применяя ${выражение}. Значением может быть что угодно — начиная от простых переменных и заканчивая сложными вызовами функций.

let timeOfDay = 'утро';
let greeting = `Доброе ${timeOfDay}!`; // Насколько просто!

let exclamation = () => "!!!";
console.log(`Добавим немного вдохновения${exclamation()}`); // Вызываем функцию на месте, чтобы произвести замену.

Подробнее об этом расскажет наш спикер на видео

Многострочные строки

Теперь вам не нужно добавлять \n для переноса строки. Обратные кавычки поддерживают многострочные тексты.

console.log(`Розы красны,
             // Да, эта JavaScript-поэзия 📜
Фиалки сини,
Я обожаю обратные кавычки
И рекомендую их вам!`);

Обход кавычек

Внутри шаблонных литералов можно без затруднений использовать одинарные ('') и двойные ("") кавычки без необходимости экранирования. Поздравляем, теперь вам не придется сталкиваться с головной болью из-за лишних слэшей!

console.log(`Он сказал: "Я готов."`); // Всё прекрасно и без лишних слешей!

Применение тегов к шаблонным строкам

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

function myTag(strings, ...values) {
  // Ваша логика здесь
}
let name = 'Джон';
console.log(myTag`Привет, ${name}!`); // Благодаря тегам приветствие стало интереснее.

Метод String.raw() и свойство .raw

Метод String.raw() позволяет работать со строками таким образом, как будто бы они не были обработаны, то есть сохраняется их исходное представление.

function getRawString() {
  return String.raw`Это сырая строка \n`;
}
// Обратите внимание, как символ '\n' выглядит в сыром виде 💪🏻
console.log(getRawString()); // Выводится исходный вариант: "Это \n сырая строка", без перевода строки.

Визуализация

Продумайте о шаблонных строках как об инструменте (🧰):

- Текстовые блоки 🧰 : Постоянные части строки
- Заполнители `${}` ⚙️: Динамические элементы

🧰 Статичный текст ⚙️ Выражение 🧰 Дополнительный статичный текст ⚙️ Другое выражение 🧰

Работа с обратными кавычками

Шаблонные строки в styled-components

В таких библиотеках, как styled-components, обратные кавычки применяются для стилизации компонентов посредством CSS-in-JS.

import styled from 'styled-components';

const Button = styled.button`
  /* Динамический стиль? Это стильно, модно и молодежно. */
  background-color: ${props => props.primary ? 'синий' : 'серый'};
  color: белый;
`;

Экранирование обратных кавычек

Иногда возникает необходимость поместить в строку сам символ обратной кавычки. Для этого достаточно поставить перед ней обратный слэш.

const escapedBacktick = `Вот так происходит экранирование обратных кавычек: \` `;
console.log(escapedBacktick); // Вывод: Вот так происходит экранирование обратных кавычек: `

Полезные материалы

1. Шаблонные литералы (Шаблонные строки) – JavaScript | MDN — детальное руководство и справочник по шаблонным литералам в JavaScript.
2. ES6 подробно: Шаблонные строки – Mozilla Hacks – блог разработчиков — полный анализ шаблонных строк, вводимых в ES6.
3. Шаблонные строки: встроенные DSL в ECMAScript 6 — изучение интерполяции и DSL при помощи шаблонных литералов.
4. 8. Шаблонные литералы – Exploring JS — информация о тегированных шаблонных литералах.
5. Легкое создание HTML с использованием шаблонных строк JavaScript – Wes Bos — применение шаблонных литералов для создания динамического HTML.
6. TypeScript: Документация – Литеральные типы шаблонов — как TypeScript расширяет возможности шаблонных литералов.
7. Шаблонные литералы | CSS-Tricks — обзор и примеры практического использования, полезные для разработчиков.