Introduction to the usage of template strings in ES6 (with examples)

This article brings you an introduction to the usage of template strings in ES6. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Overview

After the template string came out, the debate about whether single quotation marks or double quotation marks are better can be withdrawn from the stage of history. Template string ` is the best!

Syntax

Single-line text

`string text`

Multi-line text

`string text line 1
 string text line 2`

Inline expression

`string text ${expression} string text`

Tag syntax (not too fond of it)

tag `string text ${expression} string text`

Single line text

Do not care about single quotes and double quotes at all. Of course, escaping ` is inevitable. If you gain something, you must lose something

let single=`string text, '' ""\`` // "string text, '' ""`"

Multi-line text, there is no need to worry about the encoding conversion problem of line breaks, \n can also go away

let multip=`string text line 1
 string text line 2`
 // "string text line 1
 //  string text line 2"

所以我们可以这么写代码
"
let dom=`
    我要换行
    我还要换行
`
"
虽然好像没什么卵用

Expression

This is a template character Strings play the biggest role, and they have great benefits.

Stronger readability and less error-prone string splicing

let name='jack',age=23
let summary=`my name is ${name}, age is ${age}`
console.log(summary) // "my name is jack, age is 23"

Compare the previous string splicing

let name='jack',age=23
let summary='my name is ' + name + ', age is ' + age
console.log(summary) // "my name is jack, age is 23"

Expressions can be embedded, and the expressions can be very complex, but it is not recommended

let num1 = 1, num2 = 2
`${num1} + ${num2} = ${num1 + num2}` // '1 + 2 = 3'

Template string nesting

let inner=`${`${'1'}`}` // 1

Tag syntax

I don’t like it very much This feature

function myTag(strings, personExp, ageExp) {
  var str0 = strings[0]; // "that "
  var str1 = strings[1]; // " is a "
  var str2 = strings[2]; // " "
  var ageStr;
  if (ageExp > 99){
    ageStr = 'centenarian';
  } else {
    ageStr = 'youngster';
  }
  return str0 + personExp + str1 + ageStr;
}
var output = myTag`that ${ 'Mike' } is a ${ '22' }`;
console.log(output);// that Mike is a youngster

raw string

The first parameter of the label functionstrings.raw stores the original string, without escaping

function tag(strings) {
  console.log(strings.raw[0]);
}
tag`string text line 1 \n string text line 2`; // "string text line 1 \n string text line 2"

Using String.raw() has the same effect, \n is two characters.

var str = String.raw`Hi\n${2+3}!`;
// "Hi\n5!"
str.length;
// 6
str.split('').join(',');
// "H,i,\,n,5,!"

babel escape

Source code

let name="jack",age=23
let summary=`my name is ${name}, age is ${age}`

Translated

var name = "jack",
    age = 23;
var summary = "my name is " + name + ", age is " + age;

The above is the detailed content of Introduction to the usage of template strings in ES6 (with examples). For more information, please follow other related articles on the PHP Chinese website!