Формат рядка JavaScript - Як використовувати інтерполяцію рядків у JS

Додавання літералів шаблонів у ECMAScript 6 (ES6) дозволяє нам інтерполювати рядки в JavaScript.

Простішими словами, ми можемо використовувати заповнювачі для введення змінних у рядок. Ви можете побачити приклад інтерполяції рядків за допомогою літералів шаблонів у фрагменті нижче:

const age = 4.5; const earthAge = `Earth is estimated to be ${age} billion years old.`; console.log(earthAge); 

Перш за все, ви побачите, що ми використовуємо зворотні позначки для літералів шаблонів. Крім того, у нас також є формат ${placeholder}, який дозволяє вставляти динамічне значення в рядок. Все, що ${}знаходиться всередині , оцінюється як JavaScript.

Наприклад, ми могли б писати Earth is estimated to be ${age + 10} billion years old., і це працювало б так, ніби ми писали const age = 4.5 + 10;.

Як ми це робили раніше?

До шаблонних літералів ми б робили це так:

const earthAge = "Earth is estimated to be " + age + " billion years old."; 

Як бачите, у нас вже є безліч лапок для простого рядка. Уявіть, що ми повинні вставити кілька змінних. Він може швидко перетворитися на складний рядок, який не дуже читається. Таким чином, літерали шаблонів роблять рядки чистішими та читабельнішими.

Однак це лише один випадок. Давайте подивимось більше випадків використання літералів шаблонів.

Багаторядні рядки

Ще одним зручним використанням рядків шаблонів є багаторядкові рядки. До літералів шаблонів ми використовували \nнові рядки, як у console.log('line 1\n' + 'line 2').

Для двох рядків це може бути добре. Але уявіть, ми хочемо п’ять рядків. Знову ж таки, рядок стає надмірно складним.

const earthAge = `Earth is estimated to be ${age} billion years old. Scientists have scoured the Earth searching for the oldest rocks to radiometrically date. In northwestern Canada, they discovered rocks about 4.03 billion years old. `; 

Наведений фрагмент ще раз демонструє, наскільки простою і чистою стає написання багаторядкових рядків з літералами шаблонів.

Як вправу спробуйте перетворити наведений вище рядок для використання об’єднання та нового рядка \n.

Вирази

З літералами шаблонів ми також можемо використовувати вирази в рядках. Що це означає?

Наприклад, ми могли б використовувати математичні вирази, такі як множення двох чисел. Фрагмент нижче ілюструє саме це:

const firstNumber = 10; const secondNumber = 39; const result = `The result of multiplying ${firstNumber} by ${secondNumber} is ${firstNumber * secondNumber}.`; console.log(result); 

Без шаблонних літералів нам довелося б зробити щось подібне:

const result = "The result of multiplying " + firstNumber + " by " + secondNumber + " is " + firstNumber * secondNumber + "."; 

Написання рядка, наведеного вище, може швидко стати складним і заплутаним. Як ми продовжуємо бачити, шаблонні літерали спрощують та витончують вбудовування виразів у рядок.

Тернарний оператор

За допомогою інтерполяції рядків ми можемо навіть використовувати потрійний оператор всередині рядка. Це дозволяє нам перевіряти значення змінної та відображати різні речі залежно від цього значення.

Давайте подивимось на приклад нижче:

const drinks = 4.99; const food = 6.65; const total = drinks + food; const result = `The total bill is ${total}. ${total > 10 ? `Your card payment will be declined` : `Your card payment will be accepted`}.` console.log(result); 

У наведеному вище прикладі ми перевіряємо, чи загальна сума, наприклад, перевищує десять доларів.

Якщо сума перевищує десять, ми повідомляємо користувачеві, що оплата карткою буде відхилена. В іншому випадку оплата карткою приймається. Як бачите, інтерполяція рядків дозволяє нам робити круті речі за допомогою рядків.

Висновок

Додавання літералів шаблонів у ES6 дозволяє нам писати кращі, коротші та чіткіші рядки. Це також дає нам можливість вводити змінні та вирази в будь-який рядок. По суті, все, що ви пишете всередині фігурних дужок ( ${}), трактується як JavaScript.

Таким чином, ми можемо використовувати літерали шаблонів для:

  • писати багаторядкові рядки
  • вбудовувати вирази
  • писати рядки за допомогою тернарного оператора

If you like what I write, chances are you would love what I email. Consider subscribing to my mailing list. If you're not a fan of newsletters, we can always keep in touch on Twitter.