JS的String.raw方法怎么使用

本篇內(nèi)容介紹了“JS的String.raw方法怎么使用”的有關(guān)知識，在實(shí)際案例的操作過程中，不少人都會(huì)遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

String.raw

String.raw是JavaScript中模板字符串的一個(gè)標(biāo)簽函數(shù)，它的作用是將模板字符串不轉(zhuǎn)義的原始字符串內(nèi)容返回。

也就是說，如下代碼：

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

將直接返回字符串 Hi!\nAkira，而不是在Hi!和Akira中間插入回車。因?yàn)镾tring.raw標(biāo)簽存在，所以\n不被轉(zhuǎn)義。這樣其實(shí)相當(dāng)于如下代碼：

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

原始字符串不轉(zhuǎn)義，在某些情況下很有用。不知道大家有沒有遇到過用new RegExp動(dòng)態(tài)構(gòu)建正則表達(dá)式的場景，比如下面的代碼構(gòu)建一個(gè)瀏覽器默認(rèn)塊級元素標(biāo)簽的正則匹配：

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');

在這里，因?yàn)槲覀兪褂昧?code>new RegExp動(dòng)態(tài)構(gòu)建，所以我們就要把\s替換成\\s，把\/替換成\\/，把\n替換成\\n。但如果使用String.raw，就可以不用這么替換，可以直接寫成：

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

除了動(dòng)態(tài)構(gòu)建正則，還有輸出或執(zhí)行代碼塊的場景，比如：

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

上面這段代碼執(zhí)行會(huì)出錯(cuò)，因?yàn)?code>\n在字符串字面量中被替換成換行，導(dǎo)致實(shí)際執(zhí)行的代碼變成下面這樣：

console.log('test 
 test');

因?yàn)閱我栕址锩娌荒懿迦霌Q行，所以上面的代碼執(zhí)行就報(bào)錯(cuò)了。

解決的辦法是：

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

這樣就可以避免字符串代碼的轉(zhuǎn)義內(nèi)容被解析。

所以，從上面可以看出，在字符串解析的場景下，String.raw就會(huì)有用。比如我們要寫一個(gè)使用KaTeX解析公式的React組件，我們希望這么使用：

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

具體實(shí)現(xiàn)我們可以這樣寫：

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>

這么寫是不行的，因?yàn)镽eact在解析JSX的時(shí)候，會(huì)把內(nèi)容中的回車去掉，空格合并，就像瀏覽器解析HTML標(biāo)簽?zāi)菢?，而且也不能正確處理轉(zhuǎn)義符。所以如果像上面這么寫，最后瀏覽器會(huì)報(bào)錯(cuò)。

這時(shí)候，我們就可以使用String.raw標(biāo)簽，將上面的代碼寫成下面這樣：

<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就能正確解析字符串內(nèi)容了，最終實(shí)現(xiàn)效果如下：

自定義標(biāo)簽

除了默認(rèn)的String.raw，我們自定義的標(biāo)簽函數(shù)，也可以通過strings.raw來獲得原始字符串內(nèi)容，所以我們也可以將KaTeX公式解析定義成標(biāo)簽函數(shù)：

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

這樣我們就可以通過標(biāo)簽函數(shù)來解析公式，再用React渲染出來：

“JS的String.raw方法怎么使用”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！