JavaScript的常用API中一些可能忽略的点

ECMAScript定义了一些很有用的API，像String.prototype.split、Array.prototype.sort等字符串或数组的原型方法，其中有一些API非常灵活，我们平时可能只用到了部分常用的调用方式，而忽略了它们的其他用法，在这里做个小总结。

字符串String

split的第二个参数

String.prototype.split的第一个参数表示分隔符，可以是字符串或正则表达式；的第二个参数n是数字类型的，表示字符串被分割成长度最大为n的数组，当n小于0时会被忽略

1
2
3

let text = "one,two,three,four,five"
text.split(",") // ["one", "two", "three", "four", "five"]
text.split(",", 2) // ["one", "two"]

slice，substr与substring

这三个方法的功能都是字符串截取（当然都不影响原字符串），并且都可以接受一或两个参数，第一个参数表示要截取的子字符串的开始位置，slice和substring的第二个参数表示的是子字符串最后一个字符后面的位置，而substr的第二个参数则表示子字符串的最大长度。当参数都为正数时，当slice的第二个参数不大于第一个参数时，会返回””，而substring的参数仍然有效。

let str = "0123456789"
str.slice(3)        // "3456789"
str.substring(3)    // "3456789"
str.substr(3)       // "3456789"
str.slice(3, 6)     // "345"
str.substring(3, 6) // "345"
str.substr(3, 6)    // "345678"

str.slice(5, 3)     // ""
str.substring(5, 3) // "34"

当传入的参数为负值是3个方法的表现就各不相同了。slice会把传入的负数与字符串的长度相加，substring会把所有的负值参数当作0，substr则会把第一个负值参数加上字符串长度，第二个负值参数转换为0。

let str = "0123456789"
str.slice(-3)       // "789"
str.substring(-3)   // "0123456789"
str.substr(-3)      // "789"
str.slice(-3, -6)   // ""
str.slice(3, -6)    // "3"
str.substring(3, -6)// "012"
str.substr(3, -6)   // ""

indexOf和lastIndexOf

indexOf和lastIndexOf都可以接收一或两个参数，要注意的是，这两个方法都是只要第一次找到子字符串就返回子串的位置，不同的是indexOf是从头开始往后查找，而lastIndexOf是从尾开始往前查找。

1
2
3

let str = "123454321"
str.indexOf("3")        // 2
str.lastIndexOf("3")    // 6

这两个方法都可以接受第二个参数，表示从字符串的哪个位置开始搜索。indexOf从指定的位置开始向后搜索，lastIndexOf则是从指定的位置开始向前搜索。

1
2
3

let str = "123454321"
str.indexOf("3", 5)     // 6
str.lastIndexOf("3", 5) // 2

replace

若String.prototype.replace的第一个参数不是带有g(global)修饰的正则表达式，则默认只会替换第一个子字符串；它的第二个参数可以是一个函数，这个函数接受的第一个参数是模式的匹配项，最后两个参数是模式的匹配项在字符串中的位置和原始字符串，在正则表达式中定义了n个捕获组的情况下，第一个参数和最后两个参数之间还会有n个参数，表示第n个捕获组的匹配项。

function htmlEscape (text) {
  return text.replace(/[<>"&]/g, function (match, position, originalText) {
    switch (match) {
      case '<':
        return '&lt;'
      case '>':
        return '&gt;'
      case '&':
        return '&amp;'
      case '"':
        return '&quot;'
    }
  })
}

Xujiongbo