[Основы ES6] Строка шаблона

ECMAScript 6

Строки шаблонов — очень важная новая функция в ES6, эта функция облегчает нам работу с сопутствующими делами. Например, приложения для обработки встроенных выражений, многострочных строк, вставки переменных в строки, форматирования строк и т. д. В строках шаблона используются обратные кавычки (`) вместо одинарных или двойных кавычек. Вот простой пример:

let str1 = `hello!!!`; //template string
let str2 = "hello!!!";
console.log(str1 === str2); //output "true”

Сегодняшняя статья познакомит вас со следующими аспектами:

  • выражение
  • многострочная строка
  • Литералы шаблонов с тегами
  • Необработанные строки

Время чтения этой статьи оценивается в 6 минут.

выражение

Появление строк шаблона добавляет в ES6 концепцию «выражений». До ES6 мы могли соединять переменные выражения только со знаком плюс, код такой:

var a = 20;
var b = 10;
var c = "JavaScript";
var str = "My age is " + (a + b) + " and I love " + c;
console.log(str);

С момента появления шаблонных строковых выражений мы встраиваем выражение таким образом, то есть ${переменное выражение}, переменные выражения эквивалентны той же функции, а переменные значения передачи заменяются. Если мы хотим использовать пользовательскую функцию для обработки строк, мы можем использовать строку шаблона тега (функция тега). Следующий раздел будет говорить. Давайте посмотрим, как использовать строку шаблона для встраивания выражений, код выглядит следующим образом:

const a = 20;
const b = 10;
const c = "JavaScript";
const str = `My age is ${a+b} and I love ${c}`;
console.log(str);
//output “My age is 30 and I love JavaScript"

строка шаблона этикетки

Сначала мы создаем отмеченную строку шаблона и используем функцию для обработки строки шаблона, как показано в следующем коде:

const tag = function(strings, aPLUSb, aSTARb) {
  // strings is: [ 'a+b equals ', ' and a*b equals ', '' ]
  // aPLUSb is: 30
  // aSTARb is: 200
  return 'SURPRISE!';
};
const a = 20;
const b = 10;
let str = tag `a+b equals ${a+b} and a*b equals ${a*b}`;
console.log(str);

Как компилятор обрабатывает этот код? Первые строки параметров содержат все статические строки, которые разбиты на массивы по переменным-выражениям (аналогично эффекту split('$')), затем выражения-переменные разбираются по одному и передаются в соответствующие параметры aPLUSb и aSTARb.

Если мы хотим изменить значение aPLUSb, aSTARb, мы можем изменить его внутри функции:

const tag = function(strings, aPLUSb, aSTARb) {
  // strings is: ['a+b equals', 'and a*b equals']
  // aPLUSb is: 30
  // aSTARb is: 200
  aPLUSb = 200;
  aSTARb = 30;
  return `a+b equals ${aPLUSb} and a*b equals ${aSTARb}`;
};

const a = 20;
const b = 10;
let str = tag `a+b equals ${a+b} and a*b equals ${a*b}`;
console.log(str);
//output “a+b equals 200 and a*b equals 30”

Используя этот метод, мы можем создавать более гибкие строки шаблонов, получать фоновые данные и отображать наш внешний интерфейс.

многострочная строка

Строки-шаблоны Es6 дают нам новый способ создания многострочных текстовых строк. До ES6 мы могли использовать только "\n" для переноса строки в строку, код выглядит следующим образом:

console.log("1\n2\n3");
//output
//1
//2
//3

В es6 мы можем напрямую ввести возврат каретки для перевода строки, как показано в следующем коде:

console.log(`1
2
3`);

Строковый метод шаблона добавит "\n" в конце каждой строки для переноса.

Необработанные строки

Необработанная строка — это обычная строка, в которой escape-символы не интерпретируются. Мы можем создавать необработанные строки, используя строки шаблона. Мы можем использовать String.raw для получения необработанной строки, код выглядит следующим образом:

let s = String.raw `xy\n${ 1 + 1 }z`;
console.log(s); 
//output "xy\n2z"

Здесь \n не интерпретируется как новая строка. Вместо этого это необработанная строка, состоящая из двух символов, «\» и «\n», а переменная S имеет длину 6. Если мы используем пользовательскую функцию тега для обработки строки шаблона, мы можем использовать метод String.raw для ее получения, код выглядит следующим образом:

let tag = function(strings, ...values) {
  return strings.raw[0]
};
let str = tag `Hello \n World!!!`;
console.log(str);”
//output "Hello \n World!!!"

Но есть исключения (экранирование):

  • Все, что начинается с \u, будет рассматриваться как escape-последовательность Unicode.
  • Все, что начинается с \x, будет рассматриваться как шестнадцатеричное escape-последовательность.
  • Все, что начинается с \, за которым следует цифра, будет рассматриваться как восьмеричное escape-последовательность.

подраздел

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

[Основы ES6] let и scope

[Основы ES6] Введение в константу

[Основы ES6] Значения параметров по умолчанию

[Основы ES6] Синтаксис распространения

[Основы ES6] назначение деструктурирования

[Основы ES6] Функции стрелок (Функции стрелок)

Для получения более интересного контента, пожалуйста, подпишитесь на официальный аккаунт Front-end Talent в WeChat!


Категории