Summary of JavaScript methods that serious people can’t use in a lifetime (I)

Time:2021-10-27

Summary of JavaScript methods that serious people can't use in a lifetime (I)

preface

Suppose there is a requirement that a given file path beD:\bianchengsanmei\blogs\categories\JavaScriptShow it 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 in such a simple way, my article will end here. Is this to write a lonely story?

The end is impossible. If you don’t believe it, look at the output:

Summary of JavaScript methods that serious people can't use in a lifetime (I)

Obviously, we often forget to haveEscape characterThat’s what happened.

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

To display correctly, it should be written as follows:

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

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

What I mean by writing this article today is to recommend another implementation method.

Introduction to string.raw

String.raw()Is a label function of a template string, which is used to obtain the original string of a template string. For example, placeholders (such as ${foo}) will be processed as other strings it represents, while escape characters (such as \ n) will not.

grammar

String.raw(callSite, ...substitutions)
String.raw`templateString`

parameter

  • callSiteA “call point object” of the template string. Similar to {raw: [‘foo ‘,’ bar ‘,’ Baz ‘]}.
  • …substitutionsAny optional parameter representing the corresponding value of any interpolation expression.
  • templateStringTemplate string, which can contain placeholders (${…}).

Return value

The original string of the given template string.

Use example

Here are some aboutString.rawUse examples of:

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

String.raw `Hi\u000A!`;
//"Hi \ \ u000a!", the same as above. Here, you will get 6 characters of \, u, 0, 0, 0 and a,
//Any type of escape form will be invalid. Keep the output as is. If you don't believe it, try. Length

let name = "Bob";
String.raw `Hi\n${name}!`;
//"Hi \ \ nbob!", the interpolation expression can also work normally


//Under normal circumstances, you may not need to call string. Raw () as a function.
//But to simulate ` t 
String.raw`Hi\n${2+3}!`;
// 'Hi\\n5!', The character after hi is not a newline character, and \ and N are two different characters
String.raw `Hi\u000A!`;
//"Hi \ \ u000a!", the same as above. Here, you will get 6 characters of \, u, 0, 0, 0 and a,
//Any type of escape form will be invalid. Keep the output as is. If you don't believe it, try. Length
let name = "Bob";
String.raw `Hi\n${name}!`;
//"Hi \ \ nbob!", the interpolation expression can also work normally
//Under normal circumstances, you may 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'
//Note that this test passes in a string and an array like object
//The following function is equal to 'foo ${2 + 3} bar ${' Java '+' script '} Baz'
String.raw({
raw: ['foo', 'bar', 'baz']
}, 2 + 3, 'Java' + 'Script'); // 'foo5barJavaScriptbaz'
e S t ` you can do this: String.raw({ raw: 'test' }, 0, 1, 2); // 't0e1s2t' //Note that this test passes in a string and an array like object //The following function is equal to 'foo ${2 + 3} bar ${' Java '+' script '} Baz' String.raw({ raw: ['foo', 'bar', 'baz'] }, 2 + 3, 'Java' + 'Script'); // 'foo5barJavaScriptbaz'

Implementation requirements

We useString.rawTo implement the requirements at the beginning of the following article:

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

Correct display:

Summary of JavaScript methods that serious people can't use in a lifetime (I)

It can be seen that using string.raw can output the expected results with the original flavor, and will no longer cause various unexpected results due to escape characters.

summary

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

~

~End of this article, thank you for reading!

~

Learn interesting knowledge, make interesting friends and shape interesting souls!

Hello, I’mProgramming samadhiAuthor ofRecluse KingMy official account is “Programming samadhi“Welcome to pay attention. I hope you can give me more advice!

You come, with expectations, I have ink to greet you! You return, no matter gain or loss, only with the rhyme!

Pay equal attention to knowledge and skills, cultivate both internal and external skills, grasp both theory and practice, and be hard on both hands!

Recommended Today

Swift advanced (XV) extension

The extension in swift is somewhat similar to the category in OC Extension can beenumeration、structural morphology、class、agreementAdd new features□ you can add methods, calculation attributes, subscripts, (convenient) initializers, nested types, protocols, etc What extensions can’t do:□ original functions cannot be overwritten□ you cannot add storage attributes or add attribute observers to existing attributes□ cannot add parent […]