发布时间 : 2024/5/6 10:07:13 星期一 文章前端开发培训ECMAScript入门教程百读易莱胜web前端培训专家更新完毕开始阅读416dc5e7970590c69ec3d5bbfd0a79563c1ed4cb

如果大括号中的值不是字符串，将按照一般的规则转为字符串。比如，大括号中是一个对象，将默认调用对象的toString方法。 如果模板字符串中的变量没有声明，将报错。

// 变量place没有声明let msg = `Hello, ${place}`; // 报错

由于模板字符串的大括号内部，就是执行JavaScript代码，因此如果大括号内部是一个字符串，将会原样输出。 `Hello ${'World'}` // \ 模板字符串甚至还能嵌套。 const tmpl = addrs => `

${addrs.map(addr => `

`).join('')}

${addr.first}

${addr.last}

`;

上面代码中，模板字符串的变量之中，又嵌入了另一个模板字符串，使用方法如下。 const data =[

{ first:'', last:'Bond'}, { first:'Lars', last:''},];

console.log(tmpl(data));

// //// //

//// // ////

Bond

Lars

如果需要引用模板字符串本身，在需要时执行，可以像下面这样写。 // 写法一let str ='return '+'`Hello ${name}!`';let func =newFunction('name', str);func('Jack') // \

// 写法二let str ='(name) => `Hello ${name}!`';let func = eval.call(null, str);func('Jack') // \

实例：模板编译

下面，我们来看一个通过模板字符串，生成正式模板的实例。 let template = `

<%for(let i=0; i < data.supplies.length; i++){%>

• <%= data.supplies[i]%>
<%}%>

上面代码在模板字符串之中，放置了一个常规模板。该模板使用<%...%>放置JavaScript代码，使用<%= ... %>输出JavaScript表达式。 怎么编译这个模板字符串呢？

一种思路是将其转换为JavaScript表达式字符串。

echo('

');for(let i=0; i < data.supplies.length; i++){ echo('
• ');

  echo(data.supplies[i]); echo('

');};echo('

let evalExpr =/<%=(.+?)%>/g;let expr =/<%([\\s\\S]+?)%>/g;

template = template

.replace(evalExpr,'`); \\n echo( $1 ); \\n echo(`') .replace(expr,'`); \\n $1 \\n echo(`');

template ='echo(`'+ template +'`);';

然后，将template封装在一个函数里面返回，就可以了。

let script =

`(functionparse(data){ let output =\;

functionecho(html){ output += html; }

${ template }

return output;})`; return script;

将上面的内容拼装成一个模板编译函数compile。 functioncompile(template){ const evalExpr =/<%=(.+?)%>/g; const expr =/<%([\\s\\S]+?)%>/g;

template = template

.replace(evalExpr,'`); \\n echo( $1 ); \\n echo(`') .replace(expr,'`); \\n $1 \\n echo(`');

template ='echo(`'+ template +'`);';

let script =

`(functionparse(data){ let output =\;

functionecho(html){ output += html; }

${ template }

return output; })`;

return script;} compile函数的用法如下。

let parse =eval(compile(template));

div.innerHTML =parse({ supplies:[\,\,\]}); //

//
• broom
//
• mop
//
• cleaner
//

标签模板

模板字符串的功能，不仅仅是上面这些。它可以紧跟在一个函数名后面，该函数将被调用来处理这个模板字符串。这被称为“标签模板”功能（tagged template）。 alert`123`

// 等同于alert(123)

标签模板其实不是模板，而是函数调用的一种特殊形式。“标签”指的就是函数，紧跟在后面的模板字符串就是它的参数。

但是，如果模板字符里面有变量，就不是简单的调用了，而是会将模板字符串先处理成多个参数，再调用函数。 let a =5;let b =10;

tag`Hello ${ a + b } world ${ a * b }`; // 等同于tag(['Hello ',' world ',''],15,50);

上面代码中，模板字符串前面有一个标识名tag，它是一个函数。整个表达式的返回值，就是tag函数处理模板字符串后的返回值。 函数tag依次会接收到多个参数。

functiontag(stringArr, value1, value2){