Extra element in string literal array of template literals

Question

For Example, on running the below code -

let a = 5;
let b = 10;

function print(strings, ...values) {
  console.log(strings[0]);
  console.log(strings[1]);
  console.log(strings[2]);
  console.log(values[0]);
  console.log(values[1]);
}

print `add${a + b}mul${a - b}`;

Following Output is received -

"add"
"mul"
""
15
-5

Why there is an extra string literal at the end, even when i provided only only two, add and mul ?

Answer 1

Because there's empty string "" after the ${a - b}. The last index simply cannot be removed, because it is possible that there's a non-empty string. You get the same behavior by placing two expressions side by side without any string between them (${...}${...}). Example:

function tag(...all) {
  console.log(all);
}

tag `a${1}b${2}${3}c`;

If you need to get rid of empty strings, you can filter the string array using Array.filter, here's an example:

function tag(strings, ...values) {
  console.log(strings.filter(Boolean)); // filters arary, "" == false
  console.log(values);
}

tag `a${1}b${2}${3}c${4}d${5}`;

Output is

["a","b","c","d"]

instead of:

["a","b","","c","d",""]