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

上面代码中，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`; // 报错