从参数看 JavaScript 字符串的 slice、substring 以及 substr 函数

发表于 | | 阅读次数

JavaScript 字符串有三个方法用于截取部分内容，分别是：slice, substring, substr。这里通过参数的角度来区分这三个函数的不同与相同。

函数 slice

slice 函数接收的两个参数有如下的特点：

  • 一个半闭半开区间的两个端点，并且参数可为负数；
  • 第二个参数可选，默认为字符串的长度；

函数返回一个新的 这个区间之间的子字符串

1
2
3
4
5
6
7
8
9
10
var s = 'string';
// 方法调用
s.slice(start, end);
// 参数是半开半闭区间的两个端点
[
    start >= 0 ? start : s.length + start,
    isNaN(end) ? s.length : (end >= 0 ? end : s.length + end)
)

函数 slice 的模拟实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
// 随机生成8位字符串
function generateString(){
  return parseInt( Math.random() * 1E8).toString();
}
// 随机生成一位数字
function generatePoint(){
  return parseInt( Math.random() * 10 );
}
// slice实现
function sliceDescription(start, end){
  if (isNaN(start)) {
    return;
  }
  var s = generateString();
  // end默认为字符串的长度
  end = end == undefined ? s.length : end;
  var result1 = s.slice(start, end);
  // slice方法的实现
  var result2 = '';
  start = start >= 0 ? start : s.length + start;
  end = isNaN(end) ? s.length : (end >= 0 ? end : s.length + end);
  var length = (end > s.length ? s.length : end) - start;
  for (var i = 0; i < length; i++) {
    result2 += s[start + i];
  }
  console.log(result1 == result2);
}
// 循环10000次，随机取start和end
for (var i = 0; i < 1E4; i++) {
  var start = generatePoint();
  var end = generatePoint();
  sliceDescription(start, end);
}

函数 substring

substring 函数接收的两个参数有如下的特点：

  • 接收两个参数，两个参数同样是一个半闭半开区间的端点值，与 slice 不同的是参数必须大于 0；
  • 函数是取 from, to 之间较小的值作为截取起点
  • 第二个参数可选，默认为字符串的长度；

函数返回一个新的 from 到 to 之间的子字符串

1
2
3
4
5
6
7
s.substring(from, to);
// 参数的表示
[
    Math.min(from, to),
    Math.max(from, to)
)

函数 substring 的模拟实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
// 随机生成8位字符串
function generateString(){
  return parseInt( Math.random() * 1E8).toString();
}
// 随机生成一位数字
function generatePoint(){
  return parseInt( Math.random() * 10 );
}
function substringDescription(from, to){
  if ( isNaN(from) ) {
    return;
  }
  var s = generateString();
  var result1 = s.substring(from, to);
  if (from < 0 || to < 0) {
    return;
  }
  // substring的实现
  var fromNew = Math.min(from, to);
  var toNew = Math.max(from, to);
  var result2 = '';
  var length = (toNew >= s.length ? s.length : toNew ) - fromNew;
  for (var i = 0; i < length; i++) {
    result2 += s[fromNew + i];
  }
  console.log( result1 == result2 );
}
// 调用10000次，比对结果
for (var i = 0; i < 1E4; i++) {
    var from = generatePoint();
    var to = generatePoint();
    substringDescription(from, to);
}

函数 substr

函数 substr 接收两个参数：起点和截取长度。实际上， substr 是另外两个函数的一个变形。

1
2
3
4
5
6
// 调用方式：
s.substr(start, length);
// 等价于
s.slice(start, start + length)
s.substring(start, start + length)

最后，需要注意的是，substr 并为被纳入 ECMAScript 标准。

0%