每天3分钟，重学ES6-ES12(三)标签模版字符串

// ES6之前拼接字符串和其他标识符
const name = "yz"
const age = 24
const height = 175

console.log("my name is " + name + ", age is " + age + ", height is " + height)
// my name is yz, age is 24, height is 175

// ES6提供模板字符串 ``
const message = `my name is ${name}, age is ${age}, height is ${height}`
console.log(message)
//  my name is yz, age is 24, height is 175

const info = `age double is ${age * 2}`
console.log(info)
// age double is 48

function doubleAge() {
  return age * 2
}

const info2 = `double age is ${doubleAge()}`
console.log(info2)
// double age is 48

function foo(m, n, x) {
 console.log(m, n, x, '---------')
}

foo("Hello", "World")

// 另外调用函数的方式: 标签模块字符串
// foo``

// foo`Hello World`
const name = "why"
const age = 18
// ['Hello', 'Wo', 'rld']
foo`Hello${name}Wo${age}rld`

// 语法标准
tag(arrStrings, exp1, exp2, exp3, ...)
// 实际使用
foo`Hello${name}Wo${age}rld`

const Button = styled.button`
  background: ${props => props.primary ? 'palevioletred' : 'white'};
  color: ${props => props.primary ? 'white' : 'palevioletred'};
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid palevioletred;
  border-radius: 3px;
`;

i18n`Welcome to ${siteName}, you are visitor number ${visitorNumber}!`
// "欢迎访问xxx，您是第xxxx位访问者！"