JS中通过slice()&substring()截取字符串前几位的方法

 更新时间:2023年12月25日 11:46:43   作者:蓝胖子的多啦A梦  
在Javascript使用字符串中,我们不一定需要全部的字符串,这时就需要截取字符串,本文主要介绍js中截取字符串前几位的两种方法:1、使用slice() 方法;2、使用substring() 方法,本文通过示例代码介绍的非常详细,需要的朋友参考下吧

js中截取字符串前几位的两种方法slice()&substring()

在Javascript使用字符串中,我们不一定需要全部的字符串,这时就需要截取字符串。本文主要介绍js中截取字符串前几位的两种方法:1、使用slice() 方法;2、使用substring() 方法。

方法一:使用slice() 方法

可提取字符串的某个部分,并以新的字符串返回被提取的部分。

语法

string.slice(start,end)

实例

var str="abc12345";
alert(str.slice(3))   //   =>  12345
截取掉前三位字符,保留后几位

方法二:使用substring() 方法

用于提取字符串中介于两个指定下标之间的字符。

语法

string.substring(start,stop)

实例

var disName ='开心一族漂亮家园';
var shortName = disName.substring(0,5);
console.log(shortName);//打印结果:开心一族漂

补充:

三种JS截取字符串方法 slice(),substring()和substr()

JS提供三个截取字符串的方法,分别是:slice(),substring()和substr(),它们都可以接受一个或两个参数:

var stmp = “rcinn.cn”;

使用一个参数

alert(stmp.slice(3));//从第4个字符开始,截取到最后个字符;返回"nn.cn"
alert(stmp.substring(3));//从第4个字符开始,截取到最后个字符;返回"nn.cn"

slice

语法
string.slice(start,end) 不包括end

参数 描述

start 必须。 要抽取的片断的起始下标,第一个字符位置为 0。如果为负数,则从尾部开始截取。 end 可选。

紧接着要截取的片段结尾的下标。若未指定此参数,则要提取的子串包括 start。

end到原字符串结尾的字符串。如果该参数是负数,那么它规定的是从字符串的尾部开始算起的位置。slice(-2)。

表示提取原数组中的倒数第二个元素到最后一个元素(包含最后一个元素)。

切割字符串

 var a = 'stings';
 console.log(a.slice()) //stings
 console.log(a.slice(1)) //tings
 console.log(a.slice(1,2)) // t
 console.log(a.slice(-1)) //s
 console.log(a.slice(1,-1)) // ting

切割数组

var arr = [1,2,3,4,5];
console.log(arr.slice(1));//[2,3,4,5]  选择序列号从1到最后的所有元素组成的新数组。
console.log(arr.slice(1,3))//[2,3]  不包含end,序列号为3的元素

substr

所有主要浏览器都支持 substr() 方法

语法
string.substr(start,length)

参数值

start 必需。要抽取的子串的起始下标。必须是数值。如果是负数,那么该参数声明从字符串的尾部开始算起的位置。也就是说,-1 指字符串中最后一个字符,-2 指倒数第二个字符,以此类推。
length 可选。子串中的字符数。必须是数值。如果省略了该参数,那么返回从 stringObject 的开始位置到结尾的字串。

var str="Hello world!";
 console.log(str.substr()) //Hello world!
 console.log(str.substr(2)) //llo world!
 console.log(str.substr(1,2)) //el
 console.log(str.substr(-1)) //!
 console.log(str.substr(1,6)) // ello w
 console.log(str.substr(0,16)) //Hello world!

substring

定义和用法

substring() 方法用于提取字符串中介于两个指定下标之间的字符。 substring() 方法返回的子串包括 开始 处的字符,但不包括 结束 处的字符。

语法
string.substring(from, to) 不包括to

参数 描述
from 必需。一个非负的整数,规定要提取的子串的第一个字符在 string Object 中的位置。
to 可选。一个非负的整数,比要提取的子串的最后一个字符在 string Object 中的位置多 1。
如果省略该参数,那么返回的子串会一直到字符串的结尾。

var str="Hello+world!";
console.log(str.substring()) //Hello+world!
console.log(str.substring(2)) //llo+world!
console.log(str.substring(1,2)) //e
console.log(str.substring(-1)) //Hello+world!
console.log(str.substring(1,6)) // ello+
console.log(str.substring(0,16)) //Hello+world!

substing 和substr 不能用于数组 截取,slice 可以用于数组截取,截取返回的是数组

到此这篇关于js中截取字符串前几位的两种方法slice()&substring()的文章就介绍到这了,更多相关js截取字符串内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Javascript aop(面向切面编程)之around(环绕)分析

    Javascript aop(面向切面编程)之around(环绕)分析

    这篇文章主要介绍了Javascript aop(面向切面编程)之around(环绕) ,需要的朋友可以参考下
    2015-05-05
  • videojs+swiper实现淘宝商品详情轮播图

    videojs+swiper实现淘宝商品详情轮播图

    这篇文章主要为大家详细介绍了videojs+swiper实现淘宝商品详情轮播图,轮播翻动,视频暂停,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-04-04
  • js制作提示框插件

    js制作提示框插件

    这篇文章主要介绍了js制作提示框插件的方法,帮助大家更好的理解和使用js,感兴趣的朋友可以了解下
    2020-12-12
  • 每周一练 之 数据结构与算法(Stack)

    每周一练 之 数据结构与算法(Stack)

    这篇文章主要介绍了数据结构与算法(Stack),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • 基于JavaScript实现瀑布流布局

    基于JavaScript实现瀑布流布局

    这篇文章主要为大家详细介绍了基于JavaScript实现瀑布流布局,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-08-08
  • javascript 中动画制作方法 animate()属性

    javascript 中动画制作方法 animate()属性

    这篇文章主要介绍了javascript 中动画制作方法 animate()属性,animate是所有dom元素都有的方法,可以用来最做过度动画,关键帧动画,下面文章的相关介绍需要的小伙伴可以参考一下
    2022-04-04
  • JS实现单例模式的6种方案汇总

    JS实现单例模式的6种方案汇总

    单例模式的定义是保证一个类仅有一个实例,下面这篇文章主要给大家介绍了关于JS实现单例模式的6种方案,需要的朋友可以参考下
    2021-05-05
  • ES6的Fetch异步请求的实现方法

    ES6的Fetch异步请求的实现方法

    这篇文章主要介绍了ES6的Fetch异步请求的实现方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-12-12
  • JavaScript 原型学习总结

    JavaScript 原型学习总结

    每个对像都有一个隐慝的属性用于指向到它的父对像(构造对像的函数)的原型(这里称为父原型或隐式原型),并从中继承它的属性和方法
    2010-10-10
  • 固定背景实现的背景滚动特效示例分享

    固定背景实现的背景滚动特效示例分享

    固定背景滚动特效,使用background-attachment: fixed和导航菜单,页面会非常平滑的滚动,感兴趣的朋友可以参考下哈希望对你有所帮助
    2013-05-05

最新评论