在这篇文章中，我们来学习一下“JS的String.raw方法如何使用，有何作用”的相关知识，下文有详细的讲解，易于大家学习和理解，有需要的朋友可以借鉴参考，下面就请大家跟着小编的思路一起来学习一下吧。

String.raw

String.raw是JavaScript中模板字符串的一个标签函数，它的作用是将模板字符串不转义的原始字符串内容返回。

也就是说，如下代码：

console.log(String.raw`Hi!\nAkira`);

将直接返回字符串 Hi!\nAkira，而不是在Hi!和Akira中间插入回车。因为String.raw标签存在，所以\n不被转义。这样其实相当于如下代码：

console.log(`Hi!\\nAkira`);

原始字符串不转义，在某些情况下很有用。不知道大家有没有遇到过用new RegExp动态构建正则表达式的场景，比如下面的代码构建一个浏览器默认块级元素标签的正则匹配：

const blockTags = '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';

const blockReg = new RegExp(`(<\\s*(?:(?:\\/\\s*(?:${blockTags})\\s*)|(?:(?:${blockTags})\\s*\\/\\s*)|hr)>\\s*?)\\n`, 'ig');

在这里，因为我们使用了new RegExp动态构建，所以我们就要把\s替换成\\s，把\/替换成\\/，把\n替换成\\n。但如果使用String.raw，就可以不用这么替换，可以直接写成：

const blockReg = new RegExp(String.raw`(<\s*(?:(?:\/\s*(?:${blockTags})\s*)|(?:(?:${blockTags})\s*\/\s*)|hr)>\s*?)\n`, 'ig');

除了动态构建正则，还有输出或执行代码块的场景，比如：

const script = `
    console.log('test \n test');
`
execScript(script);

上面这段代码执行会出错，因为\n在字符串字面量中被替换成换行，导致实际执行的代码变成下面这样：

console.log('test 
 test');

因为单引号字符串里面不能插入换行，所以上面的代码执行就报错了。

解决的办法是：

const script = String.raw`
    console.log('test \n test');
`
execScript(script);

这样就可以避免字符串代码的转义内容被解析。

所以，从上面可以看出，在字符串解析的场景下，String.raw就会有用。比如我们要写一个使用KaTeX解析公式的React组件，我们希望这么使用：

<Katex macros={{...}}>
    公式字符串
</Katex>

具体实现我们可以这样写：

import katex from 'katex';
import React from 'react';
import ReactDOM from 'react-dom'; 

const Katex = ({children, ...props}) => {
  const code = katex.renderToString(children, {
    ...props,
    throwOnError: false
  })
  return (
    <span dangerouslySetInnerHTML={{__html: code}}/>
  )
}

对于单行公式的解析没有问题

<Katex>x^2+y^2=1</Katex>

能够正确解析成：x2+y2=1x^2+y^2=1x2+y2=1

但是如果是多行公式：

<Katex macros={{"\\f": "#1f(#2)"}}>
% \f is defined as #1f(#2) using the macro
\f\relax{x} = \int_{-\infty}^\infty
    \f\hat\xi\,e^{2 \pi i \xi x}
    \,d\xi
</Katex>

这么写是不行的，因为React在解析JSX的时候，会把内容中的回车去掉，空格合并，就像浏览器解析HTML标签那样，而且也不能正确处理转义符。所以如果像上面这么写，最后浏览器会报错。

这时候，我们就可以使用String.raw标签，将上面的代码写成下面这样：

<Katex macros={{"\\f": "#1f(#2)"}}>{String.raw`
% \f is defined as #1f(#2) using the macro
\f\relax{x} = \int_{-\infty}^\infty
    \f\hat\xi\,e^{2 \pi i \xi x}
    \,d\xi
`}</Katex>

这样KaTeX就能正确解析字符串内容了，最终实现效果如下：

https://code.juejin.cn/pen/7106683225786810376

自定义标签

除了默认的String.raw，我们自定义的标签函数，也可以通过strings.raw来获得原始字符串内容，所以我们也可以将KaTeX公式解析定义成标签函数：

function KaTeX(strings, macros) {
  return katex.renderToString(strings.raw.join(''), {
    macros,
    throwOnError: false
  });
}

这样我们就可以通过标签函数来解析公式，再用React渲染出来：

https://code.juejin.cn/pen/7106726810817462286

到此，关于“JS的String.raw方法如何使用，有何作用”的学习就结束了，希望能够解决大家的疑惑，另外大家动手实践也很重要，对大家加深理解和学习很有帮助。如果想要学习更多的相关知识，欢迎关注群英网络，小编每天都会给大家分享实用的文章!

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• JavaScript堆栈怎样理解？浅谈堆栈与拷贝

  今天给大家分享的是关于堆栈与拷贝的内容，很多新觉得堆栈比较难理解，因此本文给大家介绍了堆栈的定义以及对堆栈的分析，另外还介绍了浅拷贝和深度拷贝。那么接下来一起跟随小编来了解看看吧。

• 用JS怎样写动态的验证码干扰效果?

  这篇文章给大家分享的是用JS实现动态的验证码干扰效果，有很多验证码干扰都做了这个效果，小编觉得挺实用的，因此分享给大家做个参考，文中示例代码介绍的非常详细，感兴趣的朋友接下来一起跟随小编看看吧。

• npm镜像代理服务更改问题怎么解决

  通过改变默认npm镜像代理服务，以下三种办法任意一种都能解决问题，建议使用第三种，将配置写死，下次用的时候不用重新配置。通过config命令npmconfigsetregistry https://registry.npm.taobao.orgnpminfounderscore(如果上面配置正确这个命令会有字符串response)命令行指定npm--registry

• Axios代理配置有什么作用，如何操作

  目录Axios代理配置及响应拦截处理代理配置响应内容拦截处理Axios的proxy代理配置解析Axios代理配置及响应拦截处理Axios是vue官方推荐的异步处理方案，所以在几个vue的项目里，都用到了，所以这里写一下Axios的代理配置和响应拦截处理代理配置代理主要是为了解决跨域问题，但是现在常规解决跨域的方式，就是

• JS中复杂判断怎么写，如何避免代码冗长

  判断语句这个我们不陌生,就是判断是否满足指定的条件,如果满足则执行一定的代码,否则跳过,下面这篇文章主要给大家介绍了关于JavaScript中判断的优雅写法,需要的朋友可以参考下