JS的String.raw方法怎么使用
导读:本文共2653字符,通常情况下阅读需要9分钟。同时您也可以点击右侧朗读,来听本文内容。按键盘←(左) →(右) 方向键可以翻页。
摘要: String.rawString.raw是JavaScript中模板字符串的一个标签函数,它的作用是将模板字符串不转义的原始字符串内容返回。也就是说,如下代码:console.log(String.raw`Hi!\nAkira`);将直接返回字符串 Hi!\nAkira,而不是在Hi!和Akira中间插入回车。因为String.raw标签存在,所以\n不被转义。... ...
目录
(为您整理了一些要点),点击可以直达。String.raw
String.raw
是JavaScript中模板字符串的一个标签函数,它的作用是将模板字符串不转义的原始字符串内容返回。
也就是说,如下代码:
console.log(String.raw`Hi!\nAkira`);
将直接返回字符串 Hi!\nAkira
,而不是在Hi!
和Akira
中间插入回车。因为String.raw标签存在,所以\n
不被转义。这样其实相当于如下代码:
console.log(`Hi!\\nAkira`);
原始字符串不转义,在某些情况下很有用。不知道大家有没有遇到过用new RegExp
动态构建正则表达式的场景,比如下面的代码构建一个浏览器默认块级元素标签的正则匹配:
constblockTags='address|article|aside|base|basefont|blockquote|body|caption'+'|center|col|colgroup|dd|details|dialog|dir|div|dl|dt|fieldset|figcaption'+'|figure|footer|form|frame|frameset|h[1-6]|head|header|hr|html|iframe'+'|legend|li|link|main|menu|menuitem|meta|nav|noframes|ol|optgroup|option'+'|p|param|section|source|summary|table|tbody|td|tfoot|th|thead|title|tr'+'|track|ul';constblockReg=newRegExp(`(<\\s*(?:(?:\\/\\s*(?:${blockTags})\\s*)|(?:(?:${blockTags})\\s*\\/\\s*)|hr)>\\s*?)\\n`,'ig');
在这里,因为我们使用了new RegExp
动态构建,所以我们就要把\s
替换成\\s
,把\/
替换成\\/
,把\n
替换成\\n
。但如果使用String.raw
,就可以不用这么替换,可以直接写成:
constblockReg=newRegExp(String.raw`(<\s*(?:(?:\/\s*(?:${blockTags})\s*)|(?:(?:${blockTags})\s*\/\s*)|hr)>\s*?)\n`,'ig');
除了动态构建正则,还有输出或执行代码块的场景,比如:
constscript=`console.log('test\ntest');`execScript(script);
上面这段代码执行会出错,因为\n
在字符串字面量中被替换成换行,导致实际执行的代码变成下面这样:
console.log('testtest');
因为单引号字符串里面不能插入换行,所以上面的代码执行就报错了。
解决的办法是:
constscript=String.raw`console.log('test\ntest');`execScript(script);
这样就可以避免字符串代码的转义内容被解析。
所以,从上面可以看出,在字符串解析的场景下,String.raw
就会有用。比如我们要写一个使用KaTeX解析公式的React组件,我们希望这么使用:
<Katexmacros={{...}}>公式字符串</Katex>
具体实现我们可以这样写:
importkatexfrom'katex';importReactfrom'react';importReactDOMfrom'react-dom';constKatex=({children,...props})=>{constcode=katex.renderToString(children,{...props,throwOnError:false})return(<spandangerouslySetInnerHTML={{__html:code}}/>)}
对于单行公式的解析没有问题
<Katex>x^2+y^2=1</Katex>
能够正确解析成:x2+y2=1x^2+y^2=1x2+y2=1
但是如果是多行公式:
<Katexmacros={{"\\f":"#1f(#2)"}}>%\fisdefinedas#1f(#2)usingthemacro\f\relax{x}=\int_{-\infty}^\infty\f\hat\xi\,e^{2\pii\xix}\,d\xi</Katex>
这么写是不行的,因为React在解析JSX的时候,会把内容中的回车去掉,空格合并,就像浏览器解析HTML标签那样,而且也不能正确处理转义符。所以如果像上面这么写,最后浏览器会报错。
这时候,我们就可以使用String.raw标签,将上面的代码写成下面这样:
<Katexmacros={{"\\f":"#1f(#2)"}}>{String.raw`%\fisdefinedas#1f(#2)usingthemacro\f\relax{x}=\int_{-\infty}^\infty\f\hat\xi\,e^{2\pii\xix}\,d\xi`}</Katex>
这样KaTeX就能正确解析字符串内容了,最终实现效果如下:
自定义标签
除了默认的String.raw,我们自定义的标签函数,也可以通过strings.raw来获得原始字符串内容,所以我们也可以将KaTeX公式解析定义成标签函数:
functionKaTeX(strings,macros){returnkatex.renderToString(strings.raw.join(''),{macros,throwOnError:false});}
这样我们就可以通过标签函数来解析公式,再用React渲染出来:
</div> <div class="zixun-tj-product adv-bottom"></div> </div> </div> <div class="prve-next-news">
JS的String.raw方法怎么使用的详细内容,希望对您有所帮助,信息来源于网络。