This is the 24th day of my participation in the August More Text Challenge

preface

Suppose there is a requirement that a given file path D:\bianchengsanmei\blogs\ Categories \JavaScript be displayed on a page.

The most basic implementation might be the following:

<body>
    <div id = "container"></div>
</body>
Copy the code
const filePath = "D:\bianchengsanmei\blogs\categories\JavaScript";
document.querySelector("#container").innerText = filePath;
Copy the code

If it really can be so simple to achieve, then I end this article here, this is to write a lonely?

The end is impossible to end, do not believe, you look at the output:

Obviously, a lot of times we forget that there are escapes.

Because characters like >, <, etc. have special meanings in HTML pages, and some characters are not defined in the ASCII character set, they need to be represented by escape strings.

To display it correctly, write:

const filePath = "D:\\bianchengsanmei\\blogs\\categories\\JavaScript";
document.querySelector("#container").innerText = filePath;
Copy the code

The escape character + “\” represents the string \.

What I’m writing today is to recommend an alternative approach.

String. The raw profile

String.raw() is a template String tag function that fetches the raw String of a template String. For example, placeholders (such as ${foo}) are treated as other strings it represents, while escape characters (such as \n) are not.

grammar

String.raw(callSite, ... substitutions)String.raw`templateString`
Copy the code

parameter

  • CallSite “call point object” of a template string. Like {raw: [‘foo’, ‘bar’, ‘baz’]}.
  • . Substitutions Any optional parameter that represents the value of any interpolation expression.
  • TemplateString a templateString that can contain placeholders (${… }).

The return value

The raw string for the given template string.

Use the sample

Here are some examples of using String.raw:

String.raw`Hi\nThe ${2+3}! `;
// 'Hi\\n5! ', the character after Hi is not a newline character, \ and n are two different characters

String.raw `Hi\u000A! `;
// "Hi\\u000A!" As above, this will be \, u, 0, 0, 0, A 6 characters,
// Any type of escape will be invalid, leave the output as is, try.length

let name = "Bob";
String.raw `Hi\n${name}! `;
// "Hi\\nBob!" , and the interpolation expression will work fine


// Normally, you might not need to call string.raw () as a function.
// But to simulate 't${0}e${1}s${2}t' you can do this:
String.raw({ raw: 'test' }, 0.1.2); // 't0e1s2t'
// Notice the test, passing in a string and an array-like object
/ / the following functions and ` foo ${2 + 3} bar ${' Java '+' Script '} baz ` is equal.
String.raw({
  raw: ['foo'.'bar'.'baz']},2 + 3.'Java' + 'Script'); // 'foo5barJavaScriptbaz'
Copy the code

Implementation requirements

We use String.raw to implement the following requirements at the beginning of this article:

const filePath = String.raw`D:\bianchengsanmei\blogs\categories\JavaScript`;
document.querySelector("#container").innerText = filePath;
Copy the code

Correct display:

As you can see, using String.raw produces the desired result exactly as it is, and no more unexpected results due to escaping characters.

conclusion

We can use string. raw to ensure that the output of template characters is the original value.

~

Thanks for reading!

~

Learn interesting knowledge, meet interesting friends, shape interesting soul!

Hello everyone, I am the author of “programming Samadhi”, I am king Yi, my public account is “programming Samadhi”, welcome to pay attention, I hope you can give me more advice!

You come, with expectations, I have ink to welcome! You return, no matter gain or loss, only to yu Yun give each other!

Knowledge and skills should be paid equal attention to, internal force and external power should be repaired simultaneously, theory and practice should grasp both hands, both hands should be hard!