Author: Andy Chen
Translator: Front-end Xiaozhi
Source: medium
If you have dreams and dry goods, you can search for [Great Move to the World] on WeChat and pay attention to this Shawanzhi who is still washing dishes in the early hours of the morning.
This article GitHub https://github.com/qq449245884/xiaozhi has been included, there are complete test sites, materials and my series of articles for interviews with first-line manufacturers.
I don’t know if you have used a very useful component called styled-components when developing web pages with React.js . It styled-componentsis a component used to generate element styles, allowing you to write CSS in JSX to achieve ** CSS- The skills of IN-JS** have been said so much because the official document of styled-component has said this sentence:
This unusual backtick syntax is a new JavaScript feature called a tagged template literal.
This tagged template literal made me a little curious, because when I used it before, styled-componentsI found that it was obvious that the element methodwas to be generated function, but styled-compoentsI didn't see any "normal" call functionskills in the It turns out that this is a new approach to ES6, and I didn't know it until now. I can only say that I know very little ES6.
Template Strings
When I start tagged template literaltalking , I must talk about it first template strings. I believe that everyone who uses ES6 knows that it template stringsis a very useful method, which solves the need to use long plus signs to splicing in the previous combined strings.
// ES5
var myName = '前端小智'
console.log("Hello " + myName + '!')
// 'Hello 前端小智!'
// ES6
const myName = '前端小智'
console.log(`Hello ${
myName}`)
// 'Hello 前端小智!'
Even template strings can take advantage of the multi-line effect to achieve newlines.
// ES5
console.log('Hello\n' + '前端小智')
// Hello
// 前端小智
// Es6
console.log(`
Hello
前端小智
`)
// Hello
// 前端小智
When you see the multi-linewriting above, do you instantly feel that it is styled-componentsvery similar to writing?
In fact, the way of writing template strings is closely related to what we tagged template literalwill , which is why it is necessary to mention tagged template literal first.
Tagged Template Literal
In short, tagged template literal allows you to do it in another way function call. Usually we know that function callit is done by using parentheses, and functionthe parameters to be used are passed in the parentheses, but tagged template literalit allows you to use function calltemplate , the writing method can be said to be exactly the same as the template strings introduced above .
In the above example, you can see that the output format is a bit strange. It is an array instead of a simple string. This is because JavaScript needs to template stringrecord so template strinthat the variables in g can be captured. After all, function callthe most important thing is to parameters are passed in.
Knowing this feature, next we try to pass parameters into it functionin , like the following.
Unexpectedly, there is still no way to display the complete string. In fact, when using tagged template literalthe method function callof , the first parameter is the set of strings in template strings, raw stringsthat is, the set of other strings except variables, which will be an array, and the remaining parameters are It will be listed one by one according to the variables brought in by template strings.
For example: if a total of two variables are passed in template strings , these two variables will be brought functionin the second and third parameters, as follows.
But this is very ugly, and you can hardly predict how many variables will be passed in this template strings. this time, if you want to make this functionlook better, you can use rest parameterthe method, which just turns the variables into arrays. , so when you want to use variables, remember to deconstruct them. Examples are as follows:
[External link image transfer failed, the source site may have an anti-leech mechanism, it is recommended to save the image and upload it directly (img-J6KazRo7-1645660636484)(/img/bVcXZBq)]
Summarize
This time, a different function callmethod is , and I hope everyone can collect it.
I'm Shawanzhi. In the new year, let's brush together.
The bugs that may exist after the code is deployed cannot be known in real time. In order to solve these bugs afterwards, a lot of time is spent on log debugging. By the way, I recommend a useful bug monitoring tool , Fundebug .
Original: https://medium.com/onedegree-tech-blog/javascript-%E6%9C%89%E8%B6%A3%E7%A%84%E5%86%B7%E7%9F%A5%E8 %AD%98-tagged-template-literals-5ca9db71f066
communicate with
If you have dreams and dry goods, you can search for [Great Move to the World] on WeChat and pay attention to this Shawanzhi who is still washing dishes in the early hours of the morning.
This article has been included on GitHub https://github.com/qq449245884/xiaozhi, and there are complete test sites, materials and my series of articles for interviews with first-line manufacturers.