JavaScript实现字符串截取的三个方法总结

 更新时间:2023年02月27日 16:09:39   作者:天行无忌  
在 JavaScript 中,可以使用 substr()、slice() 和 substring() 方法截取字符串。这篇文章就来通过一些示例和大家聊聊这些方法的具体操作,需要的可以参考一下

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

substring()

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

str.substring(indexStart[, indexEnd])

参数说明:

  • indexStart:需要截取的第一个字符的索引,该索引位置的字符作为返回的字符串的首字母。
  • indexEnd:可选。一个 0 到字符串长度之间的整数,以该数字为索引的字符不包含在截取的字符串内。

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

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() 方法返回一个字符串中从指定位置开始到指定字符数的字符。语法如下:

str.substr(start[, length])

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

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

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

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

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

slice()

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

str.slice(startIndex, endIndex)

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

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() 方法不接受负数参数,如果传入负数,会被自动转换为0substr() 方法可以接受负数参数,表示倒数计数。
  • 返回值不同substring() 方法返回从起始位置到终止位置之间的字符;substr()方法返回从起始位置开始指定长度的字符。

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

方法补充

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

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

第一种方法:

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; 
} 

第二种方法:

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

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; 
} 

到此这篇关于JavaScript实现字符串截取的三个方法总结的文章就介绍到这了,更多相关JavaScript字符串截取内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 页面缩放兼容性处理方法(zoom,Firefox火狐浏览器)

    页面缩放兼容性处理方法(zoom,Firefox火狐浏览器)

    下面小编就为大家带来一篇页面缩放兼容性处理方法(zoom,Firefox火狐浏览器)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • js中的数组对象排序分析

    js中的数组对象排序分析

    这篇文章为大家分析一下js中的数组对象排序的一些知识,方便大家在以后使用中知道这些排序的原理
    2018-12-12
  • Echarts图表如何利用formatter自定义tooltip的内容和样式

    Echarts图表如何利用formatter自定义tooltip的内容和样式

    这篇文章主要给大家介绍了关于Echarts图表如何利用formatter自定义tooltip的内容和样式的相关资料,echarts的图表配置非常的灵活自由,但是不熟悉的时候容易不知道怎么配置,需要的朋友可以参考下
    2023-06-06
  • JS图片懒加载的优点及实现原理

    JS图片懒加载的优点及实现原理

    这篇文章主要介绍了JS图片懒加载的优点及实现原理,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-01-01
  • echarts中tooltip添加点击事件代码示例

    echarts中tooltip添加点击事件代码示例

    这篇文章主要给大家介绍了关于echarts中tooltip添加点击事件的相关资料,echarts tooltip点击事件是指当用户点击图表中的提示框(tooltip)时触发的事件,需要的朋友可以参考下
    2023-07-07
  • Js实现自定义右键行为

    Js实现自定义右键行为

    本文主要给大家分享的是一则javascript实现的自定义右键行为的小技巧,非常的简单实用,有相同需求的小伙伴可以参考下。
    2015-03-03
  • javascript获取本机操作系统类型的方法

    javascript获取本机操作系统类型的方法

    关于我们使用电脑的操作系统,我们通过鼠标点击就能获取,如果我们想用脚本怎么实现javascript获取本机操作系统类型的方法呢,下面给大家分享javascript获取本机操作系统类型的方法,需要的朋友可以参考下
    2015-08-08
  • BootStrap 附加导航组件

    BootStrap 附加导航组件

    Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架,主要基于 HTML、CSS、JAVASCRIPT 的。接下来通过本文给大家介绍BootStrap 附加导航组件的知识,感兴趣的朋友一起学习吧
    2016-07-07
  • js获取input长度并根据页面宽度设置其大小及居中对齐

    js获取input长度并根据页面宽度设置其大小及居中对齐

    这篇文章主要介绍了js获取input长度并根据页面宽度设置其大小及居中对齐的方法,需要的朋友可以参考下
    2014-08-08
  • JS模拟酷狗音乐播放器收缩折叠关闭效果代码

    JS模拟酷狗音乐播放器收缩折叠关闭效果代码

    这篇文章主要介绍了JS模拟酷狗音乐播放器收缩折叠关闭效果代码,涉及JavaScript响应鼠标事件控制页面元素样式变换的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-10-10

最新评论