【JS】JS之模板字面量与模板函数

模板字面量与模板函数

1. 模板字面量

//字符串的二大痛点
// 1. 多行字符串
// 过时写法 1
// let str = '<ul>\n\
//   <li>1</li>\n\
//   <li>2</li>\n\
// </ul>'
// console.log(str)
// 过时写法 2
// let arr =['<ul>\n','<li>1</li>\n','<li>2</li>\n','</ul>\n']
// str=arr.join('')
// console.log(str)
//* ES6 模板字面量写法,最好的写法
const str = `<ul>
  <li>1</li>
  <li>2</li>
</ul>`
console.log(str)

2. 字符串,嵌入表达式(变量/插值)

// php:双引号
console.log('-------------------------')
// +
let a = 10
let b = 20
const str1 = a + '+' + b + ' = ' + (a + b)
console.log(str1)
//10+20=30
console.log('-------------------------')
a = 20
b = 30
//ES6 : 模板字面量
const str2 = `${a}+${b} = ${a + b}`
console.log(str2)
console.log('-------------------------')

2.模板函数

模板字面量组成部分

// * 1.字符串字面量: + , = , 空格
// * 2.表达式: 变量, a, b 
// 声明一个模板函数
const sum = function (strings, ...args) {
  //输出字面量数组
  console.log(strings)
  console.log(strings.length)
  //输出变量表达式数组
  console.log(args)
  console.log(args.length)
// **! 参数特点**
// 1. 全是数组
// 2. 字符串面量数组长度 = 变量数组长度 + 1
// 3. 为什么加1,要确保返回的任然是一个字符串
  let result = ''
  for (let i = 0; i < strings.length; i++) {
    result += strings[i] + (args[i] ? args[i] : '')
  }
  console.log(result)
}
let num = 10
let price = 180
sum`商品金额 = ${num} * ${price} = ${num * price} 元`