JS String类型整理

String类型是字符串的对象包装类型，包含字符串的所有方法，在js中有着广泛的使用，本文对字符串的使用方法做一些总结。

1、字符方法

用于访问字符串中特定字符的方法。

1、charAt()

• 接收一个基于索0的参数，返回给定位置的字符

• "123".charAt(0)    // 1
  "123".charAt(2)    // 3
  "123".charAt(4)    // ""复制代码

2、charCodeAt()

• 接收一个基于索0的参数，返回给定位置字符的字符编码

• "123".charCodeAt(0)    // 49
  "123".charCodeAt(2)    // 51
  "123".charCodeAt(4)    // NaN
  "ABC".charCodeAt(2)    // 67
  "ABC".charCodeAt(3)    // NaN
  复制代码

3、索引值

• 方括号表示法
• IE7 及更早版本，返回undefined

str = "123"
str[0]    // 1
str[3]    // undefined复制代码

2、字符串操作方法

1、concat()

• 用于将一个或者多个字符串拼接起来，返回拼接得到的字符串
• 实践中更多的使用加号操作符“+”，简便易行

var str1  = "hello"
var str2 = str1.concat(' world')
str2    // hello world复制代码

2、slice()

• 返回被操作字符串的一个子字符串，对原字符串没有影响
• 第一个参数指定子字符串的开始位置，第二个参数表示子字符串到哪里结束。若缺少第二个参数，则将字符串的末尾作为结束位置
• 若参数是负值，将参数与字符串长度相加
  

  var str = "hello world"
  str.slice(0,3)    // hel
  str.slice(3)      // lo world
  str.slice(3,-4)   // lo w复制代码

3、substring()

• 和slice()基本一致
• 若传入参数为负数，则把所有负值都转换为0
• 会将较小的数作为起始位置
  

  var str = "hello world"
  str.substring(0,3)    // hel
  str.substring(3)      // lo world
  str.substring(3,-4)   // hel
  复制代码

4、substr()

• 第二个参数指定返回的字符个数
• 若参数为负数，会把第一个参数加上字符串的长度，第二个参数转换为0

var str = "hello world"
str.substr(0,3)    // hel
str.substr(3)      // lo world
str.substr(3,-4)   // ""
复制代码

3、字符串位置方法

1、indexOf()

• 从一个字符串的开头向后搜索给定的子字符串，返回子字符串的位置。若没有找到，返回-1
• 接收第二个参数，表示从字符串的哪个位置开始搜索
  

  str = "hello world"
  str.indexOf("o")    // 4
  str.indexOf("k")    // -1
  str.indexOf("o",5)  // 7
  复制代码

2、lastIndexOf()

• 从后向前搜索

str = "hello world"
str.lastIndexOf("o")    // 7
str.lastIndexOf("k")    // -1
str.lastIndexOf("o",5)  // 4复制代码

4、trim()方法

• 创建一个字符串的副本，删除前置以及后缀的所有空格，返回结果

str = "  hello world  "
newStr = str.trim()
newStr    // "hello world"复制代码

5、字符串大小写转换方法

• toLowerCase()，toUpperCase()， 大小写转换的方法
• 针对部分地区，toLocaleLowerCase()，toLocaleUpperCase()

str = "hello world"
newStr = str.toUpperCase()
newStr    // "HELLO WORLD"
newStr2 = newStr.toUpperCase()
newStr2()    "hello world"复制代码

6、字符串的模式匹配方法

用于在字符串中匹配模式(pattern)的方法

1、match()

• 接收一个参数，正则表达式或者一个RegExp对象
• 如果没有找到任何匹配的文本， match() 将返回 null
  
• 若找到匹配的文本，返回一个数组。该数组的第 0 个元素存放的是匹配文本，而其余的元素存放的是与正则表达式的子表达式匹配的文本。除了这些常规的数组元素之外，返回的数组还含有两个对象属性。index 属性声明的是匹配文本的起始字符在 stringObject 中的位置，input 属性声明的是对 stringObject 的引用
  
• 如果 regexp 具有标志 g，则 match() 方法将执行全局检索，找到 stringObject 中的所有匹配子字符串。若没有找到任何匹配的子串，则返回 null。如果找到了一个或多个匹配子串，则返回一个数组。不过全局匹配返回的数组的内容与前者大不相同，它的数组元素中存放的是 stringObject 中所有的匹配子串，而且也没有 index 属性或 input 属性。
  

var text = "cat, bat, sat, fat"
var pattern = /.at/
var matches = text.match(pattern)
matches    // ["cat", index: 0, input: "cat, bat, sat, fat", groups: undefined]
var pattern2 = /.at/g
var matches2 = text.match(pattern2)
matches2    // ["cat", "bat", "sat", "fat"]
复制代码

2、search()

• 接收一个参数，正则表达式或者一个RegExp对象
• 返回字符串中第一个匹配项的索引，如果没有找到，返回-1
• 始终从开头向后查找

  var text = "cat, bat, sat, fat"
  var pos = text.search(/sa/)
  pos    // 10复制代码

3、replace()

• 接收两个参数。第一个参数可以是一个RegExp对象或者字符串，第二个参数可以是一个字符串或者一个函数
• 返回替换后的结果
• 第一个参数是字符串，只会替换第一个子字符串。若要替换所有子字符串，可以提供一个正则，且要指定全局（g）标志
• 第二个参数是字符串，还可以使用特殊序列
• 第二个参数还可以是函数

var text = "cat, bat, sat, fat"
var result = text.replace(/at/, "ond")
result    // "cond, bat, sat, fat"
var result2 = text.replace(/at/g, "ond")
result2    // "cond, bond, sond, fond"复制代码

4、split()

• 基于指定的分隔符将一个字符串分割成多个字符串，并将结果放在一个数组中
• 接收第二个参数，用于指定数组的大小，以便确保返回的数组不会超过既定大小
• 可以接收一个正则表达式，有浏览器差异

  var colorText = "red,blue,green,yellow"
  var colors1 = colorText.split(",")    // ["red", "blue", "green", "yellow"]
  var colors2 = colorText.split(",",2)    // ["red", "blue"]
  复制代码

7、localeCompare()方法

• 比较两个字符串
• 如果字符串在字母表中应该排在字符串参数之前，返回一个负数
• 如果字符串等于字符串参数，返回0
• 如果字符串在字母表中应该排在字符串参数之后，返回一个正数

8、fromCharCode()方法

• 接收一或多个字符编码，然后将它们转换成一个字符串

String.fromCharCode(104,101,108,108,111)    // "hello"复制代码

ES6 新增

1、字符串的遍历接口

• 字符串可以由for...of循环遍历

  for (let codePoint of "foo") {
  console.log(codePoint)}
  // f
  // o
  // o复制代码

2、at()

• ES7新增，返回字符串给定位置的字符，避免之前bug

3.includes()，startsWith()，endsWith()

• includes()，返回布尔值，表示是否找到了字符串
• startsWith()，返回布尔值，表示参数字符串是否在源字符串头部
• endsWith()，返回布尔值，表示参数字符串是否在源字符串尾部
• 都接受第二个参数，表示开始搜索的位置
• endWith()的第二个参数n，针对前n个字符

var str = "hello world"
str.includes("h")    // true
str.endsWith("d")    // true  
str.startsWith("h")    // true复制代码

4、repeat()

• 返回一个字符串，表示将原字符串重复n次
• 参数是小数，会被向下取整
• 参数是负数或者infinity，报错

  str = "hello".repeat(3)
  str    // "hellohellohello"复制代码

5、模板字符串

• 模板字符串是增强版的字符串，用反引号（`）标识。它可以当做普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量
• 嵌入变量，需要将变量写在$()中
• 大括号中可以放入任意的js表达式，可以进行运算，以及引用对象属性，甚至调用函数

var x = 1
var y = 2
`${x} + ${y} = ${x + y}`    // "1 + 2 = 3"

var obj = {a:1, b:2}
`${obj.a + obj.b}`    // "3"

function fn () {return "hello world"}
`foo ${fn()} bar`    // "foo hello world bar"复制代码

6、其它

• codePointAt()   正确处理4个字节存储的字符，返回一个字符的码点
• String.fromCodePoint() 从码点返回对应字符，解决之前bug