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

发布时间 : 星期四 文章前端开发培训ECMAScript入门教程百读易莱胜web前端培训专家更新完毕开始阅读416dc5e7970590c69ec3d5bbfd0a79563c1ed4cb

上面代码中,tag函数的第一个参数strings,有一个raw属性,也指向一个数组。该数组的成员与strings数组完全一致。比如,strings数组是[\

line\\nSecond line\,那么strings.raw数组就是[\line\。两者唯一的区别,就是字符串里面的斜杠都被转义了。比如,strings.raw数组会将\\n视为\\\\和n两个字符,而不是换行符。这是为了方便取得转义之前的原始模板而设计的。

String.raw()

ES6还为原生的String对象,提供了一个raw方法。

String.raw方法,往往用来充当模板字符串的处理函数,返回一个斜杠都被转义(即斜杠前面再加一个斜杠)的字符串,对应于替换变量后的模板字符串。 String.raw`Hi\\n${2+3}!`; // \

String.raw`Hi\ !`; // 'Hi\\\ !'

如果原字符串的斜杠已经转义,那么String.raw不会做任何处理。 String.raw`Hi\\\\n` // \

String.raw的代码基本如下。

String.raw =function(strings,...values){ let output =\;

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

output += strings.raw[index] return output;}

String.raw方法可以作为处理模板字符串的基本方法,它会将所有变量替换,而且对斜杠进行转义,方便下一步作为字符串来使用。

String.raw方法也可以作为正常的函数使用。这时,它的第一个参数,应该是一个具有raw属性的对象,且raw属性的值应该是一个数组。 String.raw({ raw:'test'},0,1,2); // 't0e1s2t'

// 等同于String.raw({ raw:['t','e','s','t']},0,1,2);

模板字符串的限制

前面提到标签模板里面,可以内嵌其他语言。但是,模板字符串默认会将字符串转义,导致无法嵌入其他语言。

举例来说,标签模板里面可以嵌入 LaTEX 语言。 functionlatex(strings){ // ...}

let document = latex`

\\newcommand{\\fun}{\\textbf{Fun!}} // 正常工作

\\newcommand{\%unicode}{\\textbf{Unicode!}} // 报错\\newcommand{\\xerxes}{\\textbf{King!}} // 报错 Breve over the h goes \%u{h}ere // 报错`

上面代码中,变量document内嵌的模板字符串,对于 LaTEX 语言来说完全是合法的,但是 JavaScript 引擎会报错。原因就在于字符串的转义。

模板字符串会将\?和\%u{42}当作 Unicode 字符进行转义,所以\%unicode解析时报错;而\\x56会被当作十六进制字符串转义,所以\\xerxes会报错。也就是说,\%u和\\x在 LaTEX 里面有特殊含义,但是 JavaScript 将它们转义了。 为了解决这个问题,现在有一个提案,放松对标签模板里面的字符串转义的限制。如果遇到不合法的字符串转义,就返回undefined,而不是报错,并且从raw属性上面可以得到原始字符串。 functiontag(strs){ strs[0]=== undefined

strs.raw[0]===\;} tag`\%unicode and \%u{55}`

上面代码中,模板字符串原本是应该报错的,但是由于放松了对字符串转义的限制,所以不报错了,JavaScript引擎将第一个字符设置为undefined,但是raw属性依然可以得到原始字符串,因此tag函数还是可以对原字符串进行处理。 注意,这种对字符串转义的放松,只在标签模板解析字符串时生效,不是标签模板的场合,依然会报错。

let bad = `bad escape sequence: \%unicode`; // 报错