Понимание ECMAScript 6: Строки шаблона

Запомните ECMAScript 5:

 result.innerHTML = "You have " + items.length + " item(s) in your basket for a total of $" + total;

Идем дальше с тегами

Последний этап спецификации строк шаблона заключается в добавлении пользовательской функции перед самой строкой для создания теговой строки шаблона:

 var myUselessFunction = function (strings,...values) {
  var output = "";
  for (var index = 0; index < values.length; index++) {
    output += strings[index] + values[index];
  }
  output += strings[index]
  return output;
}

result.innerHTML = myUselessFunction `You have ${items.length} item(s) in your basket for a total of $${total}`;

Функция здесь используется для получения доступа как к постоянной части строки, так и к значениям оцениваемых переменных.

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

• strings[0] = "You have "
• values[0] = 3
• strings[1] = "items in your basket for a total of $"
• values[1] = 100.5
• strings[2] = ""

Как видите, каждое values[n]strings[n]strings[n + 1]

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

Например, вот фрагмент кода для блокировки строк, которые пытаются внедрить пользовательские элементы DOM:

 var items = [];
items.push("banana");
items.push("tomato");
items.push("light saber");
var total = "Trying to hijack your site <BR>";
var myTagFunction = function (strings,...values) {
  var output = "";
  for (var index = 0; index < values.length; index++) {
    var valueString = values[index].toString();

    if (valueString.indexOf(">") !== -1) {
      // Far more complex tests can be implemented here 🙂
      return "String analyzed and refused!";
    }

    output += strings[index] + values[index];
  }

  output += strings[index]
  return output;
}

result.innerHTML = myTagFunction `You have ${items.length} item(s) in your basket for a total of $${total}`;

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

Сырые строки

Функции тегов имеют специальную опцию при доступе к строковым константам: они могут использовать strings.raw Например, в этом случае \n\n

Основная цель — предоставить вам доступ к строке, как она была введена:

 var myRawFunction = function (strings,...values) {
  var output = "";
  for (var index = 0; index < values.length; index++) {
    output += strings.raw[index] + values[index];
  }
  output += strings.raw[index]
  console.log(strings.length, values.length);
  return output;
}

result.innerHTML = myRawFunction `You have ${items.length} item(s) in your basket\n.For a total of $${total}`;

Этот код генерирует следующий вывод:

 You have 3 item(s) in your basket\n.For a total of $100.5

Вы также можете использовать новую функцию String: String.raw(). Эта функция является встроенной функцией, которая делает именно то, что делает мой предыдущий пример:

 result.innerHTML = String.raw `You have ${items.length} item(s) in your basket\n.For a total of $${total}`;

Вывод

Project Spartan и последние версии Chrome (41+), Opera (28+) и Firefox (35+) поддерживают строки шаблонов, и вы можете отслеживать уровень общей поддержки ECMAScript 6 здесь . Поэтому, если вы ориентируетесь на современный веб, нет причин не использовать строки шаблонов.

Чтобы получить полное представление о том, какие новые веб-стандарты и функции появятся в Project Spartan, например, WebAudio, вы можете увидеть полный список на сайте status.modern.IE .

Больше практического опыта с JavaScript

Это может вас немного удивить, но у Microsoft есть много бесплатных обучающих программ по многим темам JavaScript с открытым исходным кодом, и мы стремимся создать намного больше с приходом Project Spartan . Проверьте мои собственные:

• Введение в WebGL 3D и HTML5 и Babylon.JS
• Создание одностраничного приложения с ASP.NET и AngularJS
• Передовая графика в HTML

Или серия обучения нашей команды:

• Практические советы по повышению производительности для ускорения работы HTML / JavaScript (серия из семи частей: от адаптивного дизайна до казуальных игр и оптимизации производительности)
• Современная веб-платформа JumpStart (основы HTML, CSS и JS)
• Разработка универсального приложения для Windows с использованием HTML и JavaScript JumpStart (используйте JS, который вы уже создали, для создания приложения)

И некоторые бесплатные инструменты: сообщество Visual Studio , пробная версия Azure и инструменты кросс-браузерного тестирования для Mac, Linux или Windows.

Эта статья является частью серии технологий веб-разработки от Microsoft. Мы рады поделиться с вами Project Spartan и его новым механизмом рендеринга . Получите бесплатные виртуальные машины или проведите удаленное тестирование на устройстве Mac, iOS, Android или Windows на сайте modern.IE .