Introduction to the usage of template strings in ES6 (with examples)-JS Tutorial-php.cn

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

不言

Release： 2018-11-14 15:49:56

forward

2490 people have browsed it

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`

Copy after login

Multi-line text

`string text line 1
 string text line 2`

Copy after login

Inline expression

`string text ${expression} string text`

Copy after login

Tag syntax (not too fond of it)

tag `string text ${expression} string text`

Copy after login

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, '' ""`"

Copy after login

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"

Copy after login

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

Copy after login

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"

Copy after login

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"

Copy after login

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'

Copy after login

Template string nesting

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

Copy after login

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

Copy after login

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"

Copy after login

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,!"

Copy after login

babel escape

Source code

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

Copy after login

Translated

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

Copy after login

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!