Введение в шаблонные литералы.

Манипулирование строками — очень распространенная задача в программировании, особенно при создании интерактивных веб-приложений. Если вы когда-либо работали с JavaScript, то вам, вероятно, приходилось помещать некоторые переменные в строки.
В старых версиях JavaScript это означало использование оператора для объединения строк с помощью процесса, называемого конкатенация строк. Однако с появлением литералов шаблонов в обновлении JavaScript ES6 (2015). Теперь у нас есть более простой способ вставки переменных в строки, который называется интерполяция строк.

Что такое шаблонные литералы?

Литералы шаблонов позволяют нам проще манипулировать строками. Они заключаются в обратные кавычки (`), а не (') или ("), и поддерживают интерполяцию строк с помощью синтаксиса (${}) для размещения переменных или вызовов функций непосредственно в строку.

Вот пример того, как литералы шаблона упрощают интерполяцию строк.

const name = "John"
const age = 24

// Old method using concatenation
const greeting = "Hello, "   name   "! You are "   age   " years old."

// New method using template literals
const greetingWithTemplateLiteral = `Hello, ${name}! You are ${age} years old.`

console.log(greetingWithTemplateLiteral) // Outputs: Hello, John! You are 24 years old.

Преимущества использования литералов шаблонов

1. Улучшенная читабельность

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

const product = "laptop"
const price = 1400

console.log(`The price of the ${product} is $${price}`)
// Outputs: The price of the laptop is $1400

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

До литералов шаблонов вам приходилось использовать escape-символы, такие как \n, для создания многострочных строк. Теперь вы можете писать их внутри обратных кавычек(`).

// Old method
const multiLineString1 = "This is the first line"   "\n"   "This is the second line"   "\n"   "This is the third line"

// New method
const multiLineString2 = `This is the first line
This is the second line
This is the third line`

console.log(multiLineString1)
console.log(multiLineString2)
/* Both output:
This is the first line
This is the second line
This is the third line
*/

3. Оценка выражения

Вы также можете выполнять вычисления, вызывать функции или манипулировать данными внутри строк.

const a = 1
const b = 10

console.log(`The sum of a and b is ${a   b}`) 
// Outputs: The sum of a and b is 11

const upperCaseName = (name) => name.toUpperCase()
console.log(`Your name in uppercase is ${upperCaseName("John")}`)
// Outputs: Your name in uppercase is JOHN

Распространенные случаи использования JavaScript

1. Генерация HTML

Вместо создания строк HTML с помощью конкатенации вы можете помещать переменные непосредственно в строку с помощью интерполяции.

const name = "John"
const htmlContent = `
  
Hello, ${name}!
  
Welcome to the site.
`

2. Запись сообщений

Вы также можете вставлять переменные непосредственно в сообщения журнала без необходимости объединения.

const user = "John"
const action = "logged in"

console.log(`User ${user} just ${action}`)
// Outputs: User John just logged in

3. Создание URL-адресов

Литералы шаблонов также упрощают создание URL-адресов.

const userId = 123
const apiUrl = `https://api.example.com/user/${userId}/details`

console.log(apiUrl)
// Outputs: https://api.example.com/user/123/details

4. Условная логика

Еще один замечательный вариант использования — Условная логика. С помощью шаблонных литералов вы можете задавать строкам простые условия, используя тернарный оператор (? :), который является сокращением условия if-else.
Логические операторы, такие как && (и) или || (или) также может использоваться для добавления условных частей в строку. Это устраняет необходимость в дополнительных операторах if-else или необходимости конкатенации.

const isMember = true
console.log(`User is ${isMember ? 'a member' : 'not a member'}`) 
// Outputs: User is a member

Вы также можете добавлять более сложные выражения внутри литералов шаблона.

/* In this example, the condition age >= 18 is evaluated
the result is either “an adult” or “a minor” based on the value of age*/
const age = 24

const message = `You are ${age >= 18 ? 'an adult' : 'a minor'}`

console.log(message) 
// Outputs: You are an adult

/*In this, if isLoggedIn is true and username exists
username is displayed or else, it defaults to “Guest” */
const isLoggedIn = true
const username = "John"

const greeting = `Welcome ${isLoggedIn && username ? username : 'Guest'}`

console.log(greeting)
// Outputs: Welcome John

Заключение

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

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

Ресурсы

1. Веб-документы MDN — литералы шаблонов
2. GitHub — Лаборатория проверки строк, этап 1
3. Школы W3 — строки шаблона JavaScript