Использование и разница между ` и ' в 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 — обзор и примеры практического использования, полезные для разработчиков.