Шаблон Literal JS

Question

Я не могу понять этот код, что означает values[0] и values[1]

var a = 5;
var b = 10;

function foo(strings, ...values) {
  let a = values[0];
  let b = values[1];
  return `Sum ${a + b}
    Product ${a * b} 
    Division ${b / a}`;
}

console.log(foo`Num1 ${a + 10}
    Num2 ${b * 2} 
    Num3 ${b / a}`);

Answer 1

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

var a = 5;
var b = 10;

function foo(strings, ...values) {
  let a = values[0];
  let b = values[1];
  console.log(a , b); 
}

foo`x dwqdwq ${a} qwdqwdy ${b}`;
// prints 5, 10


function foo2(strings, a, b, c) {
  console.log(a , b, c);
}

foo2`x dwqdwq ${1} qwdqwdy ${2} mmdwldw ${3}`;  
// prints 1, 2, 3

strings будет массивом строковых частей в шаблоне.

Answer 2

Функция тега вызывается с массивом строк в шаблоне в качестве первого аргумента, а затем с дискретными аргументами со значением каждого заполнителя.Параметр rest (...values) собирает все значения, передаваемые из второго (в вашем случае) аргумента, в массив.Таким образом, values[0] - это значение первого заполнителя в вызове foo, а values[1] - значение второго заполнителя.

Нет веских оснований для использования ...values в fooпросто чтобы затем получить a и b из values, было бы проще и, возможно, понятнее просто объявить a и b в качестве именованных параметров:

function foo(strings, a, b) {
  return `Sum ${a + b}
    Product ${a * b} 
    Division ${b / a}`;
}

var a = 5;
var b = 10;

function foo(strings, a, b) {
  return `Sum ${a + b}
    Product ${a * b} 
    Division ${b / a}`;
}

console.log(foo`Num1 ${a + 10}
    Num2 ${b * 2} 
    Num3 ${b / a}`);

Answer 3

Три точки (...) называются синтаксисом расширения.Это более аккуратный способ (особенно массивы) для передачи аргументов в функцию.

В вашем случае L

console.log(foo`Num1 ${a + 10}
    Num2 ${b * 2} 
    Num3 ${b / a}`);

Вы вызываете функцию foo с тремя значениями 15, 10 и 2, которые передаются в функцию как [15, 10, 2], поэтому values[0] будет 15 и values[1] будет 10, а values[3] будет 2.

Answer 4

Оператор распространения (...), используемый таким образом, примет несколько аргументов и преобразует их в массив.

, если я скажу:

function foo(...args) {
  //do something
}

, а затем вызову егоговоря:

foo(1, 2, 3, 4, 5)

args (внутри фактической функции) будет равно [1, 2, 3, 4, 5].В вашем примере values ​​это массив, и он получает первое значение (values ​​[0]) и второе значение (values ​​[1]) из этого массива.