Preface
If there is such a requirement: a given file path D:\bianchengsanmei\blogs\categories\JavaScript required to be displayed on the page.
The most basic implementation method may be the following:
<body>
<div id = "container"></div>
</body>const filePath = "D:\bianchengsanmei\blogs\categories\JavaScript";
document.querySelector("#container").innerText = filePath;If it can be realized so easily, then my article will end here. Is this to write about loneliness?
The end is impossible to end. If you don't believe it, look at the output:
Obviously, we often forget the escape character .
Because in HTML pages, >、<、 have special meanings, and some characters are not defined in the ASCII character set, so they need to be represented by escaped strings.To display it correctly, it should be written like this:
const filePath = "D:\\bianchengsanmei\\blogs\\categories\\JavaScript";
document.querySelector("#container").innerText = filePath;The escape character + "\" means the string \.
What I mean by writing this article today is to recommend another way to implement it.
Introduction to String.raw
String.raw() is a template string label function, used to obtain the original string of a template string, for example, a placeholder (such as ${foo}) will be processed as the other string it represents, and then Meaning characters (such as \n) will not.
grammar
String.raw(callSite, ...substitutions)
String.raw`templateString`parameter
- callSite A "call site object" for a template string. Similar to {raw: ['foo','bar','baz'] }.
- ...substitutions Any number of optional parameters, representing the value corresponding to any number of interpolation expressions.
- templateString template string, which can include placeholders (${...}).
return value
The original string of the given template string.
Example of use
The following are some String.raw of the use of 0612ce46a7effc:
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'Fulfill the demand
We use String.raw to meet the requirements at the beginning of the following article:
const filePath = String.raw`D:\bianchengsanmei\blogs\categories\JavaScript`;
document.querySelector("#container").innerText = filePath;Display correctly:
It can be seen that using String.raw can output the expected result in its original form, and will no longer cause various unexpected results due to escape characters.
Summarize
We can use String.raw to ensure that the output result of the template character is the original value.
~
~ End of this article, thanks for reading!
~
Learn interesting knowledge, meet interesting friends, and create interesting souls!
Hello, everyone, I am , the author Programming Samadhi Hermit King , and my public is "1612ce46a7f196 Programming Samadhi ", welcome to pay attention, I hope you can give me your advice!
Come, with expectations, I have Moxiang to greet you! You return, no matter the gains or losses, only with the lingering rhyme as a gift!
Pay equal attention to knowledge and skills, both internal and external skills, both theory and practice must be grasped, and both hands must be hard!
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。