您当前所在位置：首页软件教程网络编程JavaScript字符串截取的三个方法汇总

JavaScript字符串截取的三个方法汇总

归类：网络编程更新时间：2023-12-10 22:03:05作者：互联网人气：198

在 JavaScript 中，可以使用 substr()、slice() 和 substring() 方法截取字符串。

substring()

substring() 方法返回一个字符串在开始索引到结束索引之间的一个子集，或从开始索引直到字符串的末尾的一个子集。语法如下：

1
str.substring(indexStart[, indexEnd])

参数说明：

  • indexStart：需要截取的第一个字符的索引，该索引位置的字符作为返回的字符串的首字母。

  • indexEnd：可选。一个 0 到字符串长度之间的整数，以该数字为索引的字符不包含在截取的字符串内。

如果 startIndex 大于 endIndex，则会交换它们的位置。来看一段示例代码：

1
2
3
4
5
6
let str = "深耕WEB开发10+年，拥有一颗工匠的心";
 
console.log(str.substring(7)); // 10+年，拥有一颗工匠的心
console.log(str.substring(0, 5)); // 深耕WEB
console.log(str.substring(7, 5)); // 开发
console.log(str.substring(5, 5)); // 空

substr()

substr() 方法返回一个字符串中从指定位置开始到指定字符数的字符。语法如下：

1
str.substr(start[, length])

第一个参数是截取开始的位置，第二个参数是截取的长度。如下代码：

1
2
3
let str = "深耕WEB开发10+年，拥有一颗工匠的心";
let result = str.substr(1, 4);
console.log(result); // 耕WEB

上述代码的 1 表示从第二个字符开始截取，4 表示截取的长度为 4 个字符。

substr() 方法在截取字符串时是基于字符位置的，如果截取长度超过了字符串的长度，它会一直截取到字符串的末尾。如果第一个参数是负数，则从字符串的末尾开始计数。

如果可以的话，建议使用 substring() 来取代 substr()。

slice()

slice() 方法提取某个字符串的一部分，并返回一个新的字符串，且不会改动原字符串，与 substring() 方法类似。语法如下：

1
str.slice(startIndex, endIndex)

其中，startIndex 表示要截取的子字符串的起始位置（包含该位置），endIndex 表示要截取的子字符串的结束位置（不包含该位置）。如果只传入 startIndex，则会从该位置一直截取到字符串末尾。如果 startIndex 大于 endIndex，则会返回空字符串。例如：

1
2
3
4
5
6
let str = "深耕WEB开发10+年，拥有一颗工匠的心";
 
console.log(str.slice(7)); // 10+年，拥有一颗工匠的心
console.log(str.slice(0, 5)); // 深耕WEB
console.log(str.slice(7, 5)); // ""
console.log(str.slice(5, 5)); // ""

substring()和substr()的区别

substring() 和 substr() 都是截取字符串的方法，但它们有以下区别：

  • 参数不同：substring() 方法的第一个参数是起始位置，第二个参数是终止位置（不包括该位置的字符）；substr() 方法的第一个参数是起始位置，第二个参数是截取的长度。

  • 负数处理不同：substring() 方法不接受负数参数，如果传入负数，会被自动转换为0；substr() 方法可以接受负数参数，表示倒数计数。

  • 返回值不同：substring() 方法返回从起始位置到终止位置之间的字符；substr()方法返回从起始位置开始指定长度的字符。

ES6中新增了 slice() 方法，但它和 substring() 方法非常相似，也是接受起始位置和终止位置作为参数，不同之处是slice() 方法可以接受负数参数，表示从字符串末尾开始计数。substr() 虽然没有被完全遗弃，但还是建议使用 substring() 来取代 substr()。

方法补充

除了上述的方法，小编还为大家整理了其他的实现方法，希望对大家有所帮助

Javascript截取字符串中包含中文的方法

第一种方法：

1
2
3
4
5
6
7
8
9
10
11
String.prototype.sub=function(n){
  var r=/[^\x00-\xff]/g;
  if(this.replace(r,"mm").length<=n){return this;}
  var m=Math.floor(n/2);
  for(var i=m;i<this.length;i++){
    if(this.substr(0,i).replace(r,"mm").length>=n){
      return this.substr(0,i)+"...";
    }
  }
  return this;
}

第二种方法：

截取字符串 包含中文处理，参数含义：(字符串,截取长度,是否增加...) 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
function subString(str, len, hasDot){
  var newLength=0;
  var newStr="";
  var chineseRegex=/[^\x00-\xff]/g;
  var singleChar='';
  var strLength=str.replace(chineseRegex,'**').length;
  for(var i=0;i < strLength;i++){
  singleChar=str.charAt(i).toString();
  if(singleChar.match(chineseRegex) != null){
    newLength+=2;
  }else{
    newLength++;
  }
  if(newLength>len){
    break;
  }
  newStr+=singleChar;
  }
    
  if(hasDot && strLength>len){
    newStr+='...';
  }
  return newStr;
}


本文地址：http://9zoku.com/wlbc/342.html
版权声明：本文内容来自互联网，该文版权归原作者所有。本站仅提供信息存储空间服务，不拥有文章所有权，不承担相关法律责任。若对本内容有异议或投诉请与管理员联系 5604882#qq.com(请将#换成@)。
JavaScript

相关内容