前言
假如有這樣一個需求：要求將給定的一個檔案路徑 D:\bianchengsanmei\blogs\categories\JavaScript 在頁面展示出來。
最基本的實現方法可能是下面這個：
<body>
<div id = "container"></div>
</body>const filePath = "D:\bianchengsanmei\blogs\categories\JavaScript";
document.querySelector("#container").innerText = filePath;如果真能這麼簡單就實現的話，那我這篇文章到這裡就結束了，這是要寫個寂寞嗎？
結束是不可能結束的，不信，你看看輸出結果：
顯然，我們很多時候會忘記有轉義符這回事。
因為在 HTML 網頁裡，像
>、<、等字元是由特殊含義的，再加上有些字元在 ASCII 字符集中沒有定義，因此需要使用轉義字串來表示。
要想正確顯示，應該這麼寫：
const filePath = "D:\\bianchengsanmei\\blogs\\categories\\JavaScript";
document.querySelector("#container").innerText = filePath;轉義符 + “\“ 表示的是字串 \。
我今天寫這篇文章的意思呢，就是推薦給大家另外一種實現方法。
String.raw 簡介
String.raw() 是一個模板字串的標籤函式，用來獲取一個模板字串的原始字串的，比如說，佔位符（例如 ${foo}）會被處理為它所代表的其他字串，而轉義字元（例如 \n）不會。
語法
String.raw(callSite, ...substitutions)
String.raw`templateString`引數
- callSite 一個模板字串的“呼叫點物件”。類似{ raw: [‘foo’, ‘bar’, ‘baz’] }。
- …substitutions 任意個可選的引數，表示任意個內插表示式對應的值。
- templateString 模板字串，可包含佔位符（${…}）。
返回值
給定模板字串的原始字串。
使用示例
以下是一些關於 String.raw 的使用示例：
String.raw`Hi\n${2+3}!`;
// 'Hi\\n5!'，Hi 後面的字元不是換行符，\ 和 n 是兩個不同的字元
String.raw `Hi\u000A!`;
// "Hi\\u000A!"，同上，這裡得到的會是 \、u、0、0、0、A 6個字元，
// 任何型別的轉義形式都會失效，保留原樣輸出，不信你試試.length
let name = "Bob";
String.raw `Hi\n${name}!`;
// "Hi\\nBob!"，內插表示式還可以正常執行
// 正常情況下，你也許不需要將 String.raw() 當作函式呼叫。
// 但是為了模擬 `t${0}e${1}s${2}t` 你可以這樣做:
String.raw({ raw: 'test' }, 0, 1, 2); // 't0e1s2t'
// 注意這個測試, 傳入一個 string, 和一個類似陣列的物件
// 下面這個函式和 `foo${2 + 3}bar${'Java' + 'Script'}baz` 是相等的.
String.raw({
raw: ['foo', 'bar', 'baz']
}, 2 + 3, 'Java' + 'Script'); // 'foo5barJavaScriptbaz'實現需求
我們使用 String.raw 來實現以下文章開頭的需求：
const filePath = String.raw`D:\bianchengsanmei\blogs\categories\JavaScript`;
document.querySelector("#container").innerText = filePath;正確顯示：
可以看到，使用 String.raw 可以原汁原味的輸出期望結果，再也不會因為轉義字元的原因導致各種預期之外的結果。
總結
我們可以使用 String.raw 來保證模板字元的輸出結果是原始值。
~
~本文完，感謝閱讀！
~
學習有趣的知識，結識有趣的朋友，塑造有趣的靈魂！
大家好，我是〖程式設計三昧〗的作者 隱逸王，我的公眾號是『程式設計三昧』，歡迎關注，希望大家多多指教！
你來，懷揣期望，我有墨香相迎！ 你歸，無論得失，唯以餘韻相贈！
知識與技能並重，內力和外功兼修，理論和實踐兩手都要抓、兩手都要硬！
本作品採用《CC 協議》，轉載必須註明作者和本文連結