1
// ES5
2
var a = 20;
3
var b = 30;
4
var string = a + "+" + b + "=" + (a + b);
5

6
// ES6
7
const a = 20;
8
const b = 30;
9
const string = `${a}+${b}=${a+b}`;

1
var elemString = `<div>
2
  <p>So you crossed the line, how'd you get that far?</p>
3
  <p>${word} you give it a try.</p>
4
</div>`

10
// 变量
20
const hello = 'hello';
30
let message = `${hello}, world!`;
40

50
// 表达式
60
const a = 40;
70
const b = 50;
80
let result = `the result is: ${a + b}`;
90

10
// 函数
11
let fn = () => {
12
  const result = 'you are the best.';
13
  return result;
14
}
15

16
let str = `he said: ${fn()}`

10
function isLargeScreen() {
20
  return false
30
}
40
const item = {
50
  isCollapsed: true
60
}
70

80
const classes = `header ${isLargeScreen() ? '' :
90
  `icon-${item.isCollapsed ? 'expander' : 'collapser'}`}`;
10

11
console.log(classes)

10
// 案例来源于 MDN
20
var person = 'Mike';
30
var age = 28;
40

50
function myTag(strings, personExp, ageExp) {
60
  console.log(strings, personExp, ageExp)
70

80
  var str0 = strings[0]; // "that "
90
  var str1 = strings[1]; // " is a "
10

11
  var ageStr;
12
  if (ageExp > 99) {
13
    ageStr = 'centenarian';
14
  } else {
15
    ageStr = 'youngster';
16
  }
17

18
  return str0 + personExp + str1 + ageStr;
19

20
}
21

22
var output = myTag`that ${person} is a ${age}`;
23

24
console.log(output);
25
// that Mike is a youngster