# 认知

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"]

# 拓展

  • 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>"
更新于 : 7/8/2024, 10:21:14 AM