冷知識：不起眼但有用的String.raw方法_十年蹤跡

String.raw

String.raw是JavaScript中模板字符串的一個標籤函數，它的作用是將模板字符串不轉義的原始字符串內容返回。

也就是説，如下代碼：

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

將直接返回字符串 Hi!\nAkira，而不是在Hi!和Akira中間插入回車。因為String.raw標籤存在，所以\n不被轉義。這樣其實相當於如下代碼：

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

原始字符串不轉義，在某些情況下很有用。不知道大家有沒有遇到過用new RegExp動態構建正則表達式的場景，比如下面的代碼構建一個瀏覽器默認塊級元素標籤的正則匹配：

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

在這裏，因為我們使用了new RegExp動態構建，所以我們就要把\s替換成\\s，把\/替換成\\/，把\n替換成\\n。但如果使用String.raw，就可以不用這麼替換，可以直接寫成：

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

除了動態構建正則，還有輸出或執行代碼塊的場景，比如：

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

上面這段代碼執行會出錯，因為\n在字符串字面量中被替換成換行，導致實際執行的代碼變成下面這樣：

js console.log('test test');

因為單引號字符串裏面不能插入換行，所以上面的代碼執行就報錯了。

解決的辦法是：

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

這樣就可以避免字符串代碼的轉義內容被解析。

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

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

具體實現我們可以這樣寫：

```js 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 ( ) } ```

對於單行公式的解析沒有問題

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

能夠正確解析成：$x^2+y^2=1$

但是如果是多行公式：

jsx <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標籤，將上面的代碼寫成下面這樣：

jsx <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就能正確解析字符串內容了，最終實現效果如下：

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

自定義標籤

除了默認的String.raw，我們自定義的標籤函數，也可以通過strings.raw來獲得原始字符串內容，所以我們也可以將KaTeX公式解析定義成標籤函數：

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

這樣我們就可以通過標籤函數來解析公式，再用React渲染出來：

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

以上就是全部內容，雖然很簡單，但是非常有用。

你還知道或用過String.raw以及其他標籤函數嗎？歡迎在評論區討論。