JavaScript的基本包装类型—String类型

String类型概述

String在底层字符串是以字符数组的形式保存的

let str = "Hello";
// 在底层其实就是['H','e','l','l','o']

字符串可以通过数组方式截取

PS：box[1]在 IE6,7,8 浏览器会显示 undefined，所以使用时要慎重

let str= '41412'
console.log(str[1]) // 结果是1

 

 

String类型的属性

判断字符串长度：length

var str1 = '41412'
console.log(str1.length)

var str2 = ' 41412'
console.log(str2.length) // 结果是6，前面空格也算是一个字符

constructor属性

var str = 'qianduoduo'
console.log(str.constructor) // [Function: String]

 

 

String对象的通用方法

比如 valueOf()、toLocaleString()和 toString()方法，但这些方法都返回字符串的基本值

// 以下方法结果都是原字符串,传参数无效
var str = 'javascript'
console.log(str.valueOf(2)) //javascript
console.log(str.toString(2)) // javascript
console.log(str.toLowerCase()) // javascript
console.log(str.toLocaleString()) // javascript

charAt方法：根据下标获取子字符串

var str = '41412'
console.log(str.charAt(2)) // 结果是4，表示获取下标为2的那个字符串

charCodeAt方法：以Unicode编码形式返回指定索引位置的字符

var str = '41412'
console.log(str.charCodeAt(2)) // 结果是52

 

 

String类型的操作方法

concat(str1...str2)方法

将字符串参数串联到调用该方法的字符串，就是将多个字符串串联成一个字符串，并且返回一个新的字符串

let str = 'Mr.Lee'
let newStr = str.concat(' is ', ' Teacher ', '!')

console.log(newStr)// Mr.Lee is Teacher !
console.log(str) // Mr.Lee,原来的字符串没有被修改

slice(n,m)方法

返回字符串n到m之间位置的字符串，包含头不包含尾，这个方法同样返回一个新的字符串，原来的字符串不会被修改

let str = 'Mr.Lee'
let newStr1 = str.slice(3)
let newStr2 = str.slice(3, 5) // 包含头不包含尾
let newStr3 = str.slice(1, -1) // 第二个参数可以是负数，表示从后面算起，同样不包含尾

console.log(newStr1) // Lee
console.log(newStr2) // Le
console.log(newStr3) // r.Le
console.log(str) // Mr.Lee

substring(n,m)方法

返回字符串n到m之间位置的字符串，包含头不包含尾，这个方法同样返回一个新的字符串，原来的字符串不会被修改，跟slice方法基本一样

let str = 'Mr.Lee'
let newStr1 = str.substring(3) // 只有一个参数的时候从后面算起
let newStr2 = str.substring(3, 5) // 包含头不包含尾
let newStr3 = str.substring(1, -2) // 不支持负数

console.log(newStr1) // Lee
console.log(newStr2) // Le
console.log(newStr3) // M
console.log(str) // Mr.Lee

substr(n,m)方法

返回字符串n到m之间位置的字符串，包含头包含尾，这个方法同样返回一个新的字符串，原来的字符串不会被修改，跟slice方法基本一样

IE6,7,8 的 JavaScript 实现在处理向 substr()方法传递负值的情况下存在问题，它会返回原始字符串，使用时要切

let str = 'Mr.Lee'
let newStr1 = str.substr(3) // 只有一个参数的时候从后面算起
let newStr2 = str.substr(3, 5) // 包含头也包含尾
let newStr3 = str.substr(3, -1) // 返回是空的字符串，不支持负数

console.log(newStr1) // Lee
console.log(newStr2) // Lee
console.log(newStr3)
console.log(str) // Mr.Lee

下面来看一下这三个方法使用负数的情况

let str = 'Mr.Lee'
let newStr1 = str.slice(-3) // 6+(-3)=3 位开始    6表示字符串的长度
let newStr2 = str.substring(-3) // 负数返回全部
let newStr3 = str.substr(-3) // 6+(-3)=3 位开始     6表示字符串的长度

console.log(newStr1) // Lee
console.log(newStr2) // Mr.Lee
console.log(newStr3) // Lee

var str = 'Mr.Lee'
let newStr1 = str.slice(3, -1) // 6+(-1)=5, (3,5) ，6表示字符串的长度
let newStr2 = str.substring(3, -1) // 第二参为负，直接转 0，并且方法会把较小的数字提前，(0,3)
let newStr3 = str.substr(3, -1) // 第二参数为负，直接转 0 ，(3,0)

console.log(newStr1) // Le
console.log(newStr2) // Mr.
console.log(newStr3) // 空字符串

 

 

字符串位置方法

indexOf(str,n)

从n开始搜索的第一个str，并将搜索的索引值返回，如果没有找到就返回-1，可以用来判断指定的str再在字符串中存不存在

let str = 'Mr.Lee is Lee'
let index1 = str.indexOf('L')
let index2 = str.indexOf('L', 5)
let index3 = str.indexOf('C')
let index4 = str.indexOf('m')

console.log(index1) // 3
console.log(index2) // 10
console.log(index3) // -1
console.log(index4) // -1,区分大小写

lastIndexOf(str,n)

从n开始搜索的最后一个str，并将搜索的索引值返回，如果没有找到就返回-1

let str = 'Mr.Lee is Lee'
let index1 = str.lastIndexOf('L')
let index2 = str.lastIndexOf('L', 5)

console.log(index1) // 10
console.log(index2) // 3，从指定的位置向前搜索

PS：如果没有找到想要的字符串或者角标不存在，则返回-1。示例：找出全部的 L

let str = 'Mr.Lee is Lee' // 包含两个 L 的字符串
let strArr = [] // 存放 L 位置的数组
let pos = str.indexOf('L') // 先获取第一个 L 的位置

// 如果位置大于-1，说明还存在 L
while (pos > -1) {
  strArr.push(pos) // 添加到数组
  pos = str.indexOf('L', pos + 1) // 重新赋值 pos 目前的位置
}
console.log(strArr) // 输出:[ 3, 10 ]

 

 

大小写转换方法

let str = 'Mr.Lee is Lee'
let newStr1 = str.toLowerCase() // 全部小写
let newStr2 = str.toUpperCase() // 全部大写
let newStr3 = str.toLocaleLowerCase() // 全部小写并且本地化
let newStr4 = str.toLocaleUpperCase() // 全部大写并且本地化

console.log(newStr1)
console.log(newStr2)
console.log(newStr3)
console.log(newStr4)

 

 

字符串的模式匹配方法

以上中 match()、replace()、serach()、split()在普通字符串中也可以使用，简单用法如下：

let str = 'Mr.Lee is Lee'
let newStr1 = str.match('L') // 找到 L，返回 L 否则返回 null
let newStr2 = str.search('L') // 找到 L 的位置，和 indexOf类似:3
let newStr3 = str.replace('L', 'Q') // 把 L 替换成 Q，返回替换后的字符串:Mr.Qee is Lee
let strArr = str.split(' ') // 以空格分割成数组，并返回字符串数组:[ 'Mr.Lee', 'is', 'Lee' ]

console.log(newStr1) // [ 'L', index: 3, input: 'Mr.Lee is Lee', groups: undefined ]
console.log(newStr2) // 3
console.log(newStr3) // Mr.Qee is Lee
console.log(strArr) // [ 'Mr.Lee', 'is', 'Lee' ]

match()详细用法：match() 方法可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配

stringObject.match(regexp): 这个方法的行为在很大程度上有赖于 regexp 是否具有标志 g。

如果 regexp 没有标志 g，那么 match() 方法就只能在 stringObject 中执行一次匹配。如果没有找到任何匹配的文本， match() 将返回 null。

如果 regexp 具有标志 g，则 match() 方法将执行全局检索，找到 stringObject 中的所有匹配子字符串。若没有找到任何匹配的子串，则返回 null。如果找到了一个或多个匹配子串，则返回一个数组。

在全局检索模式下，match() 即不提供与子表达式匹配的文本的信息，也不声明每个匹配子串的位置,如果您需要这些全局检索的信息，可以使用 RegExp.exec()。

let str = 'Mr.Lee is Lee'
let newStr1 = str.match(/\L+/g) // 表示全局找字符L,如果有可以返回多个，没有返回null

console.log(newStr1) // [ 'L', 'L' ]

 

其他方法

console.log(String.fromCharCode(76)); // L，输出 Ascii 码对应的字符

localeCompare(str1,str2)方法详解：比较两个字符串并返回以下值中的一个；

如果字符串在字母表中应该排在字符串参数之前，则返回一个负数。(多数-1)

如果字符串等于字符串参数，则返回 0。

如果字符串在自附表中应该排在字符串参数之后，则返回一个正数。(多数 1)

var box = 'Lee'
console.log(box.localeCompare('apple')) // 1
console.log(box.localeCompare('Lee')) // 0
console.log(box.localeCompare('zoo')) // -1
console.log(box.localeCompare('1'))// 传入数字结果全部是1
console.log(box.localeCompare('啊'))// 传入中文全部是-1，不会按中文的拼音排序

 

 

给String对象添加自定义方法（String-原型属性prototype）

发现js中的string对象方法有限，想要对字符串操作的其他功能。

比如：去除字符串两端的空格。这时只能自定义。这里就可以使用一个该字符串的原型属性来完成

原型：就是该对象的一个描述。该描述中如果添加了新功能。那么该对象都会具备这些新功能。而prototype就可以获取到这个原型对象。通过prototype就可以对对象的功能进行扩展。

去除字符串两端的空格。

思路：

1.定义两个变量，一个记录开始的位置。一个记录结束的位置。

2.对开始的位置 的字符进行判断，如果是空格，就进行递增，直到不是空格为止。

3.对结束的位置 的字符进行判断，如果是空格，就进行递减，直到不是空格为止。

4.必须要保证开始<=结束，这样才可以进行截取。

function trim (str) {
  let start = 0
  let end = str.length - 1
  while (start <= end && str.charAt(start) === ' ') {
    start++
  }
  while (start <= end && str.charAt(end) === ' ') {
    end--
  }
  return str.substring(start, end + 1)
}
let s = '     ab c      '
console.log('-' + trim(s) + '-')// 单独调用该方法

既然trim方法是用来操作字符串的方法，可不可以像字符串已有的方法一样，将该方法也定义到字符串对象中呢？

直接用字符串对象调用就欧了。给string对象添加一个可以去除字符串两端空格的新功能：

String.prototype.trim = function () {
  let start = 0
  let end = this.length - 1

  while (start <= end && this.charAt(start) === ' ') {
    start++
  }
  while (start <= end && this.charAt(end) === ' ') {
    end--
  }
  return this.substring(start, end + 1)
}

var s = '     ab c      '
s = s.trim()
console.log('s=' + s)

将字符串转成字符数组

String.prototype.toCharArray = function () {
  let chs = [] // 定义一个数组。

  for (let x = 0; x < this.length; x++) { // 将字符串中的每一位字符存储到字符数组中。
    chs[x] = this.charAt(x)
  }
  return chs
}
let str = 'huang'
console.log(str.toCharArray())

将字符串反转

String.prototype.stringReverse = function () {
  let strArr = this.split('') // 先拆分成数组
  let strArrReverse = strArr.reverse()// 再反转，但还是数组
  let str = strArrReverse.join('')// 最后把数组变成字符串
  return str
}
let str = 'huang'
console.log(str.stringReverse())

 

 

ES6新方法—includes(), startsWith(), endsWith()

传统上，JavaScript只有indexOf方法，可以用来确定一个字符串是否包含在另一个字符串中。ES6又提供了三种新方法

includes(str) : 判断是否包含指定的字符串

let str = 'huangjianfeng'
console.log(str.includes('feng')) // true
console.log(str.includes('feg')) // false

startsWith(str) : 判断是否以指定字符串开头

let str = 'huangjianfeng'
console.log(str.startsWith('huang')) // true
console.log(str.startsWith('hung')) // false

endsWith(str) : 判断是否以指定字符串结尾

let str = 'huangjianfeng'
console.log(str.endsWith('feng')) // true
console.log(str.endsWith('fng')) // false

let s = 'Hello world!'

// 这三个方法都支持第二个参数，表示开始搜索的位置
// 使用第二个参数n时，endsWith的行为与其他两个方法有所不同。它针对前n个字符，
// 而其他两个方法针对从第n个位置直到字符串结束
console.log(s.startsWith('world', 6)) // true
console.log(s.endsWith('Hello', 5)) // true
console.log(s.includes('Hello', 6)) // false

repeat(count) : 重复指定次数

repeat方法返回一个新字符串，表示将原字符串重复n次

let str1 = 'a';
let str2 = 'hello';

console.log(str1.repeat(3));  //aaa
console.log(str2.repeat(2));  //hellohello
console.log(str2.repeat(0));  //结果什么都没有
console.log(str2.repeat(2.8));  //结果是：hellohello，参数如果是小数，会被取整

// 如果repeat的参数是负数或者Infinity，会报错
// console.log(str2.repeat(-2));   //RangeError: Invalid count value
// console.log(str2.repeat(Infinity));  //RangeError: Invalid count value


// 如果参数是0到-1之间的小数，则等同于0，这是因为会先进行取整运算。
// 0到-1之间的小数，取整以后等于-0，repeat视同为0。
// 参数NaN等同于0
console.log(str2.repeat(0.8));
console.log(str2.repeat(-0.8));
console.log(str2.repeat(NaN));

//如果repeat的参数是字符串，则会先转换成数字
console.log(str2.repeat('b'));  //""  ,字符b不能转换成数字，Number('b')结果是NaN
console.log(str2.repeat('3'));  //hellohellohello

console.log(Number('b'))

 

 

ES6中的模板字符串

简化字符串的拼接——模板字符串必须用 `` 包含，变化的部分使用${xxx}定义

let obj = {user: 'huang', age: 34}
console.log(`我的名字叫做${obj.user},我的年龄是：${obj.age}`) // 我的名字叫做huang,我的年龄是：34