JavaScript包装类（二）——String类

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第13天，点击查看活动详情

基本使用

String常见的属性：
- length：获取字符串的长度；
String也有很多常见的方法和操作，我们来进行学习。
操作一：访问字符串的字符
- 使用方法一：通过字符串的索引 str[0]
- 使用方法二：通过str.charAt(pos)方法
- 它们的区别是索引的方式没有找到会返回undefined，而charAt没有找到会返回空字符串；
练习：字符串的遍历
- 方式一：普通for循环
- 方式二：for..of遍历

var message = "Hello World"
// 1.属性: length
console.log(message.length)

// 2.访问字符串中某个位置的字符
console.log(message[4])
console.log(message.charAt(4))
console.log(message[20])
console.log(message.charAt(20))

// 3.字符串的遍历
// for普通遍历
for (var i = 0; i < message.length; i++) {
    console.log(message[i])
}
// for..of的遍历 -> 迭代器
// 目前可迭代对象: 字符串/数组
// 对象是不支持for..of的
// String对象内部是将字符串变成了一个可迭代对象
for (var char of message) {
    console.log(char)
}

修改字符串

字符串的不可变性：
- 字符串在定义后是不可以修改的，所以下面的操作是没有任何意义的；

所以，在我们改变很多字符串的操作中，都是生成了一个新的字符串；
- 比如改变字符串大小的两个方法
- toLowerCase()：将所有的字符转成小写；
- toUpperCase() ：将所有的字符转成大写；

查找字符串

在开发中我们经常会在一个字符串中查找或者获取另外一个字符串，String提供了如下方法：
方法一：查找字符串位置
- 从fromIndex开始，查找searchValue的索引；
- 如果没有找到，那么返回-1；
- 有一个相似的方法，叫lastIndexOf，从最后开始查找（用的较少）
方法二：是否包含字符串
- 从position位置开始查找searchString，根据情况返回 true 或 false
- 这是ES6新增的方法；

var message = "my name is baj"
var name = "baj"

// 判断一个字符串中是否有另外一个字符串
// 1.indexOf(searchString, fromIndex)
/*
  index:
    情况一: 搜索到, 搜索字符串所在索引位置
    情况二: 没有搜索到, 返回-1
*/
var index = message.indexOf(name)
if (message.indexOf(name) !== -1) {
  console.log("message中包含name,所在索引位置：", message.indexOf(name))
} else {
  console.log("message不包含name")
}

// 2.includes: ES6中新增一个方法, 就是用来判断包含关系
if (message.includes(name)) {
  console.log("message中包含name")
}

判断是否以某字符串开头和结尾

方法三：以xxx开头
- 从position位置开始，判断字符串是否以searchString开头；
- 这是ES6新增的方法，下面的方法也一样；
方法四：以xxx结尾
- 在length长度内，判断字符串是否以searchString结尾；

// 3.startsWith: 是否以xxx开头
if (message.startsWith("my")) {
  console.log("message以my开头")
}

// 4.endsWith: 是否以xxx结束
if (message.endsWith("baj")) {
  console.log("message以baj结尾")
}

替换字符串 & 截取子字符串

方法五：替换字符串
- 查找到对应的字符串，并且使用新的字符串进行替代；
- 这里也可以传入一个正则表达式来查找，也可以传入一个函数来替换；

// 5.replace 替换字符串
var newMessage = message.replace("baj", "kobe")
console.log(message)
console.log(newMessage)

方法六：获取子字符串（这种负数啥的不用记到底是怎么样的，用的时候试一下就知道了）

var message = "Hello World"

// 获取子字符串
console.log(message.slice(3, 7))
console.log(message.slice(3, -1)) //lo Worl  从3截取到从后往前的1位置
console.log(message.slice(-3)) // rld   截取后3个
console.log(message.slice(3))

// substr
console.log(message.substr(3, 7))

开发中推荐使用slice方法。

其它方法

方法七：拼接字符串
方法八：删除首位空格
方法九：字符串分割
- separator：以什么字符串进行分割，也可以是一个正则表达式；
- limit：限制返回片段的数量；
更多的字符串的补充内容，可以查看MDN的文档：
- developer.mozilla.org/zh-CN/docs/…

var str1 = "Hello"
var str2 = "World"
var str3 = "kobe"

// 1.字符串拼接
// +
// var newString = str1 + str2 + str3
// console.log(newString)
// concat方法: 链式调用
var newString2 = str1.concat(str2).concat(str3)
var newString3 = str1.concat(str2, str3, "abc", "cba")
console.log(newString2)
console.log(newString3)

// 2.删除首位的空格
console.log("    baj      abc   ".trim())

// 3.字符串切割split
var message = "abc-cba-nba-mba"
var items = message.split("-")
var newMessage = items.join("*")
console.log(newMessage)