前端开发培训ECMAScript入门教程百读易莱胜web前端培训专家

发布时间 : 2024/4/26 13:19:54 星期五 文章前端开发培训ECMAScript入门教程百读易莱胜web前端培训专家更新完毕开始阅读

// ...}

// 等同于functiontag(stringArr,...values){ // ...}

tag函数的第一个参数是一个数组，该数组的成员是模板字符串中那些没有变量替换的部分，也就是说，变量替换只发生在数组的第一个成员与第二个成员之间、第二个成员与第三个成员之间，以此类推。

tag函数的其他参数，都是模板字符串各个变量被替换后的值。由于本例中，模板字符串含有两个变量，因此tag会接受到value1和value2两个参数。 tag函数所有参数的实际值如下。

? 第一个参数：['Hello ', ' world ', ''] ? 第二个参数: 15 ? 第三个参数：50

也就是说，tag函数实际上以下面的形式调用。 tag(['Hello ',' world ',''],15,50)

我们可以按照需要编写tag函数的代码。下面是tag函数的一种写法，以及运行结果。

let a =5;let b =10; functiontag(s, v1, v2){ console.log(s[0]); console.log(s[1]); console.log(s[2]); console.log(v1); console.log(v2);

return\;}

tag`Hello ${ a + b } world ${ a * b}`; // \ 下面是一个更复杂的例子。

let total =30;let msg = passthru`The total is ${total}(${total*1.05}with tax)`;

functionpassthru(literals){ let result =''; let i =0;

while(i < literals.length){ result += literals[i++]; if(i < arguments.length){ result += arguments[i]; } }

return result;}

msg // \

上面这个例子展示了，如何将各个参数按照原来的位置拼合回去。 passthru函数采用 rest 参数的写法如下。 functionpassthru(literals,...values){ let output =\; let index;

for(index =0; index < values.length; index++){ output += literals[index]+ values[index]; }

output += literals[index] return output;}

“标签模板”的一个重要应用，就是过滤 HTML 字符串，防止用户输入恶意内容。 let message =

SaferHTML`

${sender} has sent you a message.

`; functionSaferHTML(templateData){ let s = templateData[0];

for(let i =1; i < arguments.length; i++){

let arg =String(arguments[i]);

// Escape special characters in the substitution. s += arg.replace(/&/g,\) .replace(//g,\);

// Don't escape special characters in the template. s += templateData[i]; }

return s;}

上面代码中，sender变量往往是用户提供的，经过SaferHTML函数处理，里面的特殊字符都会被转义。

let sender ='