认知

console.log('lencamo')

console.log(new String('lencamo')) // String {'lencamo'} 🤔

console.log('lencamo'.length)
console.log('lencamo'[5])

一、字符串查找

1、chatAt

console.log('lencamo'.charAt(2)) // n

拓展：

• 字符编码

console.log('lencamo'.charCodeAt(4)) // 97

// 应用：收集A-Z的字符数组
var arr = []
for (var i = 65; i < 91; i++) {
  arr.push(String.fromCharCode(i))
}

console.log(arr)

2、indexOf

String.prototype.indexOf()

  搜索整个调用字符串，并返回指定子字符串第一次出现的索引，如果不存在，则返回-1。

console.log('Blue Whale'.indexOf('blue')) // returns -1

3、includes

String.prototype.includes()

  includes() 方法执行区分大小写的搜索，以确定是否可以在另一个字符串中找到一个字符串，并根据情况返回 true 或 false。

console.log('Blue Whale'.includes('blue')) // returns false

注意

  和数组中使用 indexOf / include 不同的是，在字符串中使用它们有一个坑：

• 空字符串 返回的是 0

console.log('Blue Whale'.indexOf('')) // returns 0
// console.log('Blue Whale'.indexOf('B')) // returns 0

// includes方法同理

3、search 🎁

String.prototype.search()

  includes() 方法执行正则表达式和 String 对象之间的一个搜索匹配，并返回指定子字符串第一次出现的索引，如果不存在，则返回-1。

let str = 'cats and dogs, cats and pigs'

var regex1 = /[A-Z]/g
console.log(str.search(regex1)) // -1

// RegExp对象拓展
let regex2 = /cat/g
console.log(regex2.test(str)) // true
console.log(regex2.exec(str)) // ["cat"]

// String对象扩展
console.log(str.match(regex2)) // ["cat", "cat"]

ES6 新增方法

• startsWith(" ")
• endsWith(" ")
• repeat(n)

二、截取字符串

1、substr() -- 长度

依赖于初始索引值、长度

substr(startIndex, [newStrLength])

// 截取字符串(等效于slice)
var res = str.substr(1)

// 截取指定长度的内容
var res = str.substr(1, 4) //等效于slice(1, 5)

截取字符串内容，前开后闭区间

2、substring() -- 索引

依赖于索引值

substring(startIndex, [endIndex])

应用场景：

// 截取字符串
var str = str.substring(1)

// 截取指定位置的内容
var str = str.substring(1, 5)

3、slice 方法 *

  和 substring 基本一样，也有些许区别：

提示：slice() 不仅可以在字符串中使用，还可以在数组中使用。

//反向截取字符串
var res = str.slice(-1)

4、split 方法

描述：

  使用指定的分隔符字符串将一个 String 对象分割成子字符串数组

问题：'\'作为分割符

'image\png' 这个字符串存在是不合理的

const str = 'image\\png'
// const str = 'image/png'

console.log(str.split(/\\/g)) // ["image", "png"]
console.log(str.split('/')) // ["image", "png"]

var str = 'Hello World, Lencamo.'

var words = str.split(' ')
words // ['Hello', 'World,', 'Lencamo.']

var chars = str.split('')
chars[8] // 'r'

var str = 'a|b|c|d'

console.log(str.split('|')) // ['a', 'b', 'c', 'd']

三、字符串替换

1、replace() -- 内容

  替换字符串指定内容

str = 'This is Microsoft, welcome to visit Microsoft company! '
var n = str.replace('Microsoft', 'W3School') //Please visit W3School!

// 全局🍗替换:
var n = str.replace(/Microsoft/g, 'W3School') // 使用正则

//字符串数组元素内容替换:
var n = str.replace(/Microsoft/g, 'W3School')

// 全局🍗匹配替换
// var n = str.replace(/<|>|"|&/g, function(match){});
var n = str.replace(/<|>|"|&/g, (match) => {})

replace()方法值能替换第一个匹配到的字符串，而 ES6 中的 replaceAll()方法可以替换所以匹配的字符串。

2、大小写

console.log('Lencamo'.toLowerCase())
console.log('Lencamo'.toUpperCase())

应用：

var str = 'lencamo'
console.log(str.substr(0, 1).toUpperCase() + str.substr(1))
// console.log(str.slice(0, 1).toUpperCase() + str.slice(1))

3、首尾空格

trim()

trimStart()、trimLeft()

trimEnd()、trimRight()

四、特殊字符串

1、json 字符串

// 注意：里面是严格的对象格式：key要加引号
var str = '{"name":"lencamo","age": 22}'

console.log(JSON.parse(str))

注意：【MDN：JSON.stringify() (opens new window)】

JSON.stringify(function(){}) or JSON.stringify(Symbol()) or JSON.stringify(undefined) 会返回 undefined

JSON.stringify(NaN) or JSON.stringify(Infinity)会返回 "null"

JSON.stringify(Map()) or JSON.stringify(Set()) 等 会返回 "[]"

更多的：深浅拷贝问题

var obj = { name: 'lencamo', age: 22 }

console.log(JSON.stringify(obj))

// 完整使用👀：
// JSON.stringify(value[, replacer[, space]])
JSON.stringify(obj, null, 2)

2、模板字符串

问题描述：

<ul>
  <!-- ……插入内容 -->
</ul>

• 解决问题

let name = 'lencamo'

// 1、普通字符串方式
// let oli =
//   '<li>\
//     <b> ' +name +'</b>\
//   </li>'

// 2、模板字符串方式
let oli = `<li>
    <b>${names}</b>
  </li>`

• 应用示例

// 除了可以处理变量，还可以处理表达式、函数等

function test() {
  return '函数返回结果'
}

let arr = ['lencmao', 'ren', 'zhangsan']

let newList = arr.map(function (item, index) {
  return `<li class="${index === 0 ? 'active' : ''}">
    <b>${names}</b>
    ${test()}
  </li>`
})

let oul = document.querySelector('ul')
oul.innerHTML = newList.join('')

3、repeat() 方法

  repeat() 构造并返回一个新字符串，该字符串包含被连接在一起的指定数量的字符串的副本。

let elmStr = `<span>span标签的内容</span>`

let newStr = elmStr.repeat(3)
// "<span>span标签的内容</span><span>span标签的内容</span><span>span标签的内容</span>"