preface

Traditional string templates

In traditional Javascript, string templates usually use the plus sign (+) to concatenate strings if we manipulate the DOM.

ES6 template character string

Backquotes (‘) represent ordinary strings, can also represent multi-line strings (free line wrapping), and can also insert variables (instead of traditional plus concatenation).

Introduction to the

Template strings use backquotes (‘) instead of double and single quotes in regular strings. Template strings can contain placeholders for a particular syntax (${expression}). The expression in the placeholder and the surrounding text are passed together to a default function that concatenates all the pieces.

If a template string begins with an expression, it is called a tagged template string. This expression is usually a function that is called after the template string is processed, and you can manipulate the template string until the final output. When using a backquote (‘) inside a template string, you need to precede it with an escape character (\).

Note: Newlines and Spaces in the template string are preserved, and an error is reported if variables in the template string are not declared.

Subsequently, all of our examples are illustrated with comparisons to traditional strings.

Basic usage

Var str1 = "I am: "; Var str2 = "student "; Window. alert(str1 + 1 + str2); Var str1 = "I am: "; Var str2 = "student "; Window. The alert (` ${str1} ${str2} a `); // I am a studentCopy the code

As you can see, template string concatenation is much cleaner and more intuitive.

You can also easily get multi-line strings:

Var str1 = "I am: "; Var str2 = "student "; console.log(str1+'\n'+str2); Var str1 = "I am: "; Var str2 = "student "; console.log(`${str1} ${str2}`); /* I am a student */Copy the code

Any characters inserted in the new line are part of the template string.

If there is a string inside the braces, it will print it as is:

console.log(`hello ${'ES6'} ! `) // hello ES6 !Copy the code

Insert expression

Embedding expressions (arbitrary expressions or object attributes, etc.) in ordinary strings is a bit bloated in the traditional approach, and a string template is more elegant.

Var n1 = 10; var n2 = 20; console.log("n1+n2="+(n1+n2)); N1 +n2=30 var n1 = 10; var n2 = 20; console.log(`n1+n2=${n1+n2}`); //n1+n2=30Copy the code

We can see that it is not only hierarchical, but also intuitive.

Template string nesting

Template strings can also be nested.

Const data = '·1·'; / / · 1 ·Copy the code

If you need to reference the template string itself and execute it as needed, you can write it as a function:

let data = (str) => `____${str}`; console.log(data('123')); / / ____123Copy the code

The template string calls the function

Similarly, template strings support calling functions, ${function name}.

Function demo(){return 'Hello ES6! `} / / call the demo () the window. The alert (` I will call the demo () : ${demo ()} `); // I'll call demo() : Hello ES6!Copy the code

Tagged template string

A more advanced form of a template string is a template string with a tag. The tag lets you parse template strings with functions. The first argument to the label function contains an array of string values. The rest of the arguments are expressions related. Finally, your function can return a processed string (or it can return something completely different). The name of the function used for this tag can be anything.

In plain English, the interpolation is calculated and concatenated by a default function, which adds a label (function) to the template string. The function is automatically called before the string is output. Filters in vue, React and other frameworks are similar.

// array is an array of literal strings // n1/n2: the result of an expression // var name = 'little li '; var age = 102; Function new_fun(strings, n1,n2) {var string 0 = strings[0]; Var str1 = strings[1]; Var n1 = '*'; // * var n2 = `|`; / / | / / eventually need return back (or an error) return str0 + n1 + n2 + + str1 ` ` ~ ~ I am a tail; Var output = new_fun '${name} ${age}'; // Print console.log(output); / / I'm * | this year ~ ~ I am tailCopy the code

Return (); return ();