es6关于函数和模版字符``的问题

Question

虽说搬砖的时候一般不会碰到这个问题,但是今天不小心写错了一个函数偶然间发现。
想问问各位谁比较懂的，解释一下函数直接使用模版符号`的这种写法的返回值

下面是测试的代码：

const log = (val1,val2) => {
  console.log('val1值为:',val1);
  console.log('val2值为:',val2);
  return `${val1}`;
};

console.log `${[1]}`;
console.log('------------------');
console.log `${1}`;
console.log('------------------');
console.log `1`;
console.log('------------------');
console.log(log([1]));
console.log('------------------');
console.log(log `${[1]}`);
console.log('------------------');
console.log(log `${1}`);
console.log('------------------');
console.log(log `1`);
console.log('------------------');
console.log `${log([1])}`;
console.log('------------------');
console.log `${log `${[1]}`}`;
console.log('------------------');
console.log `${log `${1}`}`;
console.log('------------------');
console.log `${log `1`}`;

打印的结果：

[ '', '' ] [ 1 ]
------------------
[ '', '' ] 1
------------------
[ '1' ]
------------------
val1值为: [ 1 ]
val2值为: undefined
1
------------------
val1值为: [ '', '' ]
val2值为: [ 1 ]
,
------------------
val1值为: [ '', '' ]
val2值为: 1
,
------------------
val1值为: [ '1' ]
val2值为: undefined
1
------------------
val1值为: [ 1 ]
val2值为: undefined
[ '', '' ] '1'
------------------
val1值为: [ '', '' ]
val2值为: [ 1 ]
[ '', '' ] ','
------------------
val1值为: [ '', '' ]
val2值为: 1
[ '', '' ] ','
------------------
val1值为: [ '1' ]
val2值为: undefined
[ '', '' ] '1'

看返回结果，我就感觉很奇怪，一个是第一个参数返回的是数组，第二个参数有时还能返回值。

Answer 1

之前没有看到过有相关的内容，但是根据lz的尝试可以得出以下几个结论

1. 模板字符串中使用了插值语法，并且被作为参数传入函数时，其会返回多个值：第一个值是一个数组，是为被插值语法分割的字符串所形成的数组；其后分别为插值语法中的插值，非引用类型值，顺序为从左到右。
2. 不使用插值语法时，只会返回一个值，为一个数组，只有一个数组元素，为全部的字符串。
3. 一个对象被插值语法使用时，会调用其toString方法转换为字符串后再执行，例如console.log ${log ${[1]}};的结果，在return ${val1}时，val1原为["",""]变为,。

经过一定思考过后，会发现，其实1和2是同一条逻辑。