JavaScript String Format - Как да използвам интерполация на низове в 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.

По този начин можем да използваме шаблонни литерали за:

  • напишете многоредови низове
  • вграждане на изрази
  • напишете низове с троичния оператор

Ако харесвате това, което пиша, вероятно ще ви хареса това, което изпращам по имейл. Помислете за абониране за моя пощенски списък. Ако не сте фен на бюлетини , винаги можем да поддържаме връзка в Twitter .