Встроенные выражения с использованием литералов шаблонов в JS
При обработке элементов строкового типа с помощью Javascript (JS) для упрощения обработки строк используются литералы шаблонов. Одной из таких функций является использование встроенных выражений. При построении шаблонного литерала используется символ ` (обратная черта), чтобы заключить оператор.
Основное внимание будет уделено внедренным выражениям, но нам нужно обсудить их в контексте литералов шаблонов. Мы можем начать с нескольких основных примеров.
Зачем использовать шаблонные литералы?
Строки можно определять по-разному, используя литералы шаблонов. Вместо использования символов ‘ (одинарные кавычки) или “ (двойные кавычки) для заключения строки используется `. Это помогает преодолеть ограничения при обработке определенных строк. Например, если вы хотите включить в строку слово «Джонни» целиком, использование стандартного форматирования не сработает.
let string = "He's often called "Johnny"";
Вы получите сообщение об ошибке из среды, потому что она не может обработать слово «Джонни» (в двойных кавычках).
Uncaught SyntaxError: Unexpected identifier 'Johnny'
Ошибка означает, что вы не можете использовать «Джонни» в строке, заключенной в двойные кавычки. Он будет работать с Johnny, заключенным в одинарные кавычки.
let string = "He's often called 'Johnny'"; He's often called 'Johnny'
Что, если вы хотите, чтобы строка включала двойные кавычки?
Здесь будет использоваться обратный тик (т. е. литералы шаблона). Напишем утверждение следующим образом.
let string = `He's often called "Johnny"`; He's often called "Johnny"
На этот раз вы можете заключить Джонни в двойные кавычки. Обычно в строках некоторые слова заключаются в двойные кавычки. Вот еще один пример строки с двойными кавычками.
let string = `Alice said, "We are here."`; Alice said, "We are here."
Литералы шаблонов — это способ разрешить кавычки внутри строк.
Интерполяция строк
Следующий метод — интерполяция. В этом методе мы используем заполнители внутри строки, используя ${}. Это также для ясности программисту в отношении того, что он хочет включить в строку.
Возьмем, к примеру, обработку строки, которая включает пользовательские данные. Мы определим 2 переменные со значениями.
const name = "Alice Walker"; const city = "Los Angeles";
Затем мы можем использовать метод интерполяции, чтобы консоль записывала значения в отформатированную строку.
console.log(`The user ${name}, lives in the city of ${city}.`)
The user Alice Walker, lives in the city of Los Angeles.
В этом методе интерполяции использовалась подстановка переменных, чтобы поместить значения, которые мы определили, внутрь заполнителей.
${name} = Alice Walker
${city} = Los Angeles
Встроенные выражения
Во встроенных выражениях используются литералы шаблонов с интерполяцией строк для замены значений в заполнителях. Внутри строк может быть много выражений, и это может быть утомительно при использовании конкатенации строк.
Литералы шаблонов избегают использования операторов конкатенации. Это помогает улучшить читаемость кода за счет использования заполнителей в форме ${ выражение. Это выполняет замены для встроенных выражений.
С помощью операторов конкатенации+ мы можем обработать строку в следующем примере.
const length = 120;
const width = 75;
// using concatenation
console.log("The area of the space is " + length * width);
The area of the space is 9000
Теперь давайте воспользуемся литералами шаблонов со встроенными выражениями.
const length = 120;
const width = 75;
// using template literals
console.log(`The area of the space is ${length * width}`);
The area of the space is 9000
Мы получаем тот же результат, но он позволяет использовать гораздо более эффективный способ кодирования с меньшим использованием повторяющихся символов при форматировании строки. Это также облегчает чтение кода.
Когда у вас есть несколько встроенных выражений, использование метода конкатенации также усложняется из-за раздутого кода и, следовательно, требует больше времени для завершения (сложность времени O (n)). Возьмем тот же пример, но добавим в строку еще несколько выражений.
const length = 120;
const width = 75;
const area = length * width
// using concatenation
console.log("The area of the space is " + area + ", " + "with a perimeter of " + 2 * (length + width) + ", " + "and length is the area divided by the width which is equal to " + area / width) ;
The area of the space is 9000, with a perimeter of 390, and length is the area divided by the width which is equal to 120
Это требует гораздо больше времени, чтобы напечатать заявление. Вот пример использования литералов шаблона для встроенных выражений.
const length = 120;
const width = 75;
const area = length * width
// using template literals
console.log(`The area of the space is ${area}, with a perimeter of ${2 * (length + width)}, and "length" is the area divided by the width which is equal to ${area / width}`) ;
The area of the space is 9000, with a perimeter of 390, and "length" is the area divided by the width which is equal to 120
Обратите внимание, что мы также можем использовать двойные кавычки внутри строки (например, «длина»).
Синопсис
Встроенные выражения позволяют вставлять значения в отформатированные строки текста, используя литералы шаблонов. В более сложных программах это может быть более простой способ замены переменных в заполнителях.
console.log(`Deploying contracts with the account: ${deployer.address}`);
Это также упрощает кодирование, особенно при наличии нескольких выражений в строке. Вместо использования операторов конкатенации можно использовать заполнители для выражений. Это экономит время и делает код более четким и легким для чтения.
