脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JavaScript截取字符串

JavaScript截取字符串的Slice、Substring、Substr函数详解和比较

 更新时间：2014年03月20日 09:20:48   作者：  
这篇文章主要介绍了JavaScript截取字符串的Slice、Substring、Substr函数详解和比较,需要的朋友可以参考下

在JavaScript中,提取子字符串主要是通过 Slice、Substring、Substr 三个方法之一。

复制代码 代码如下:
// slice
// 语法: string.slice(start [, stop])
"Good news, everyone!".slice(5,9);
// 'news'

// substring
// 语法: string.substring(indexA [, indexB])
"Good news, everyone!".substring(5,9);
// 'news'

// substr
// 语法: string.substr(start [, length])
"Good news, everyone!".substr(5,4);
// 'news'


在三个方法之中输入一个  start 的索引参数，和一个可选的 end 索引（ 或 length ）参数。

但他们在一些重要的方面有所不同：
1.substr()方法从指定位置，提取指定数量的字符。
param： start 开始提取字符的位置索引，length 提取字符的数量长度。
return： 一个新的字符串。 从 start 处开始的 length 个字符。
在不同浏览器有不一致的表现，现代浏览器允许 start 索引参数为负数，来表示从字符串结尾处开始，提取字符的数量。但是在ie8及以下版本浏览器 start索引参数 最小从0开始计算。【 substr 为Web浏览器附加的ECMAScript特性，不建议使用时 start 索引为负值】

复制代码 代码如下:
var str = "abcdefghij";

console.log("(1): "      + str.substr(1));     // (1): bcdefghij
console.log("(1,2): "    + str.substr(1,2));   // (1,2): bc

console.log("(-3): "     + str.substr(-3));    // (-3): hij
console.log("(-3,2): "   + str.substr(-3,2));  // (-3,2): hi

console.log("(20, 2): "  + str.substr(20,2));  // (20, 2):
console.log("(-20, 2): " + str.substr(-20,2)); // (-20, 2): ab

 

// ie8及以下
console.log("(-3): " + str.substr(-2)); // (-20, 2): hij
console.log("(-3, 2): " + str.substr(-2)); // (-20, 2): ab


2.substring() 方法用于提取字符串 一个index索引至另一个之间的子集， 或是直到字符串的结束。
param： indexA, indexB 两个参数取值范围为一个0 至 字符串长度之间的整数。
return： 返回一个新的字符串， 从小的索引开始 到 大的索引之间，包括小的索引位置字符，不包括大的索引位置字符。
substring 的参数是可反转的，它总是使用小的的参数值作为开始，大的参数值作为结束。 如果参数是小于0或NaN，它被看作是0，如果参数大于字符串的长度，被视为字符串的长度值.
复制代码 代码如下:
// assumes a print function is defined
var anyString = "Mozilla";

// Displays "Moz"
console.log(anyString.substring(0,3));
console.log(anyString.substring(3,0));

// Displays "lla"
console.log(anyString.substring(4,7));
console.log(anyString.substring(7,4));

// Displays "Mozill"
console.log(anyString.substring(0,6));

// Displays "Mozilla"
console.log(anyString.substring(0,7));
console.log(anyString.substring(0,10));

3.slice 提取字符串的一部分。
param： beginSlice开始提取字符的位置索引，可以为负，如果为负值被视为(sourceLength-beginSlice)，sourceLength是字符串的长度，即：从字符串的尾部开始算起的位置endSlice 结束提取的字符的位置索引。如果省略，提取到结束。如果为负值被视为(sourceLength-endSlice)。
return： 返回一个新的字符串，从 start 开始（包括 start）到 end 结束（不包括 end）为止的所有字符。
参数都可以为负，如果索引是负的，则从字符串的尾部开始算起。

复制代码 代码如下:

var str1 = "The morning is upon us.";
console.log(str1.slice(4, -2));   //  morning is upon u

var str = "The morning is upon us.";
str.slice(-3);     // "us."
str.slice(-3, -1); // "us"
str.slice(0, -1);  // "The morning is upon us"

您可能感兴趣的文章:

相关文章

  • ES6新特性之解构、参数、模块和记号用法示例

    ES6新特性之解构、参数、模块和记号用法示例

    这篇文章主要介绍了ES6新特性之解构、参数、模块和记号用法,结合实例形式分析了解构、参数、模块和记号的功能、用法及相关使用注意事项,需要的朋友可以参考下
    2017-04-04
  • 微信小程序用户授权环节实现过程

    微信小程序用户授权环节实现过程

    这篇文章主要介绍了微信小程序用户授权环节实现过程，在商城项目中，我们需要对部分的页面，进行一个授权的判别，例如购物车，及个人中心，需要完成用户信息的授权后，获取到相关信息
    2023-01-01
  • 异步加载JS、CSS代码（推荐）

    异步加载JS、CSS代码（推荐）

    这篇文章主要介绍了异步加载JS、CSS代码的相关资料,非常不错具有参考借鉴价值，需要的朋友可以参考下
    2016-06-06
  • JavaScript中的6种变体函数的区别和应用

    JavaScript中的6种变体函数的区别和应用

    JavaScript 中函数调用有许多独特的变体方式,例如 ~function、-function 等,这些变体不仅展现了 JavaScript 语言的灵活性,也可以在某些场景下让代码更加简洁,本文将通过示例代码和解析,来全面剖析这些特殊的函数调用方式及其返回值的区别
    2025-01-01
  • JS获取Promise对象里面的值问题

    JS获取Promise对象里面的值问题

    这篇文章主要介绍了JS如何获取Promise对象里面的值问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2023-01-01
  • 开启Javascript中apply、call、bind的用法之旅模式

    开启Javascript中apply、call、bind的用法之旅模式

    在Javascript中，Function是一种对象。Function对象中的this指向决定于函数被调用的方式,使用apply，call 与 bind 均可以改变函数对象中this的指向。
    2015-10-10
  • JS数组扁平化、去重、排序操作实例详解

    JS数组扁平化、去重、排序操作实例详解

    这篇文章主要介绍了JS数组扁平化、去重、排序操作,结合实例形式详细分析了JS数组扁平化、去重、排序等相关操作原理、实现技巧与注意事项,需要的朋友可以参考下
    2020-02-02
  • 关于定制FileField中的上传文件名称问题

    关于定制FileField中的上传文件名称问题

    本文通过实例代码给大家介绍了定制FileField中的上传文件名称问题，感兴趣的朋友参考下吧
    2017-08-08
  • 微信小程序实现slideUp、slideDown滑动效果及点击空白隐藏功能示例

    微信小程序实现slideUp、slideDown滑动效果及点击空白隐藏功能示例

    这篇文章主要介绍了微信小程序实现slideUp、slideDown滑动效果及点击空白隐藏功能,涉及微信小程序事件响应、页面元素属性动态操作实现滑动与蒙层功能相关技巧与注意事项,需要的朋友可以参考下
    2018-12-12
  • js同源策略详解

    js同源策略详解

    这篇文章主要介绍了js同源策略,较为详细的分析了javascript中同源策略的概念与相关应用注意事项,需要的朋友可以参考下
    2015-05-05

最新评论