В ES2015, как вы восстанавливаете помеченный литерал шаблона в правильном порядке?

Question

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

var a = 5;
var b = 10;

function tag(strings, ...values) {
    console.log(strings[0]);
    console.log(strings[1]);
    console.log(values[0]);
    console.log(values[1]);

    return strings[0] + ' ' + values[0] + ' ' + strings[1] + ' ' + values[1];
}

tag`Hello ${ a + b } world ${ a * b }`;

Отсюда, как мы создаем сообщение в том же порядке, в котором оно было передано при смешивании strings с values?

Приведенная выше функция тега не сможет поддерживать порядок при изменении порядка значений / строк, например:

tag`Hello ${ a + b } world ${ a * b }`;
// swapped to
tag`${ a + b } hello ${ a * b } world`;

Документы: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

Answer 1

strings.length всегда будет больше, чем ...values.length одним. Первое значение strings всегда будет содержимым строки шаблона до первой замены. Когда подстановка является первым значением строки шаблона, strings[0] пустая строка То же самое происходит, когда последнее значение строки шаблона является подстановкой, strings[strings.length-1] пустая строка

Так что в вашем примере вы выводите пустую строку как strings[0] а также strings[1] становится hello, но вы никогда не выводите strings[2] за world, Правильный способ воссоединения строк - назначить первый индекс strings в строку, затем переберите все значения и сложите их по порядку.

function tag(strings, ...values) {
  var str = strings[0];
  for (i = 0; i < values.length; i++) {
    str += values[i] + strings[i+1];
  }

  return str;
}