关于javascript:ES6九-String

Template
- String Literals（字符串字面量）
  - 字符串换行
  - 蕴含变量或者表达式
- Tag Literals（标签字面值）
  - 有逻辑运算
字符串的扩大办法
ES6-ES10 学习幅员

用来解决字符串拼接问题，从 ES6 开始能够这样定义字符串了。

`string text`

`string text line 1
 string text line 2`

`string text ${expression} string text`

在这里你能够任意插入变量或者表达式，只有用 ${} 包起来就好。

ES5

let html
html = '<div>'+
    '<p> 你好啊 </p>'+
'</div>'
console.log(html)
//<div><p> 你好啊 </p></div>

ES6

html = `<div>
    <p> 你好啊 </p>
</div>`
console.log(html)  
//<div>
//    <p> 你好啊 </p>
//</div>

ES5

const a = 20
const b = 10
const c = 'javascript'
const str = 'my age is' + (a + b) + 'i love' + c
console.log(str)
//my age is 30 i love javascript

ES6

const str = `my age is ${a + b} i love ${c}`
console.log(str)
//my age is 30 i love javascript

后面的字符串字面量解决了字符串拼接的问题，对于蕴含简单逻辑的字符串并不是简略的表达式能搞定的。所以须要另一种解决方案：Tag Literals

ES5

const retailPrice = 20
const wholeSalePrice = 16
let showText = ''if (type ==='retail') {showText = '您此次购买的单价是：' + retailPrice} else {showText = '您此次购买的批发价是：' + wholeSalePrice}
console.log(showText)

ES6

第一个参数拿到的数组，空格为分隔符
前面的参数能够依据模板字符串里有的变量获取
能够解决很多的变量输入问题，更平安
能够制作很多模板引擎

const name  = 'tom'
const gender = true
function myTagFuc (string) {console.log(string)
  // ["hey,", "is a", "", raw: Array(3)]
}

const result = myTagFuc`hey, ${name} is a ${gender}`
// 拿到的后果是模板字符串宰割过之后的后果，因为外面可能掺这表达式，所以是个数组

除了数组之外，还能够拿到在模板字符串中所有拿到的表达式返回值，下面能够拿到 name 和 gender

const name  = 'tom'
const gender = true
function myTagFuc (string, name, gender) {console.log(string) // ["hey,", "is a", "", raw: Array(3)]
  console.log(name) // tom
  console.log(gender) // true
}

const result = myTagFuc`hey, ${name} is a ${gender}`

如果咱们函数有返回值，那么会作为整体的模板字符串返回值返回

const name  = 'tom'
const gender = true
function myTagFuc (string, name, gender) {return 123}

const result = myTagFuc`hey, ${name} is a ${gender}`
console.log(result)  // 123

想要原样返回那么在函数外部进行拼装

const name  = 'tom'
const gender = true
function myTagFuc (string, name, gender) {
  const sex = gender ? 'man' : 'woman'
  return string[0] + name + string[1] + sex + string[2]
}

const result = myTagFuc`hey, ${name} is a ${gender}`
console.log(result)
// hey, tom is a man

includes() —— 蕴含
startsWith() —— 起始
endsWidth() —— 结尾

相比拟正则和 indexOf，这种会便捷有很多，这三个都是

第一个参数是字符串 str，必传
第二个参数是可选，传起始地位
返回值是 boolean，找到了是 true，没有找到是 false
辨别大小写

const message = `Error: foo is not defined.`

console.log(message.startsWith('Error')) // true
console.log(message.endsWith('.')) // true
console.log(message.includes('foo')) // true
console.log(message.includes('foo', 8)) // false

目录

Template

String Literals（字符串字面量）

字符串换行

蕴含变量或者表达式

Tag Literals（标签字面值）

有逻辑运算

字符串的扩大办法

学习幅员