JS - 字符串截取方法汇总(slice、substring、substr等)

一、使用 slice() 截取

1,函数说明

slice()方法可通过指定的开始和结束位置,提取字符串的某个部分,并以新的字符串返回被提取的部分。语法如下:

stringObject.slice(start, end)

参数说明:

  • start(必需):规定从何处开始选取。如果是负数,那么它规定从字符串尾部开始算起的位置。也就是说,-1 指最后一个字符,-2 指倒数第二个字符,以此类推。
  • end(可选):规定从何处结束选取,即结束处的字符下标。如果没有指定该参数,那么截取的字符串包含从 start 到结束的所有字符。如果这个参数是负数,那么它规定的是从数组尾部开始算起的字符。

2,使用样例

    var str = "0123456789"

    console.log(str.slice(3))
    console.log(str.slice(-3))

    console.log(str.slice(0,5))
    console.log(str.slice(0,-3))

    console.log(str.slice(3,5))
    console.log(str.slice(3,-3))

    console.log(str.slice(5,3))
    console.log(str.slice(5,-11))

运行结果如下:


二、使用 substring() 截取

1,函数说明

(1)substring方法用于提取字符串中介于两个指定下标之间的字符。语法如下:

stringObject.substring(start, stop)

参数说明:

  • start(必需):一个非负的整数,规定要提取的子串的第一个字符在 stringObject 中的位置。
  • stop(可选):一个非负的整数,比要提取的子串的最后一个字符在 stringObject 中的位置多 1。

返回值说明:
该方法返回一个新的字符串,该字符串值包含 stringObject 的一个子字符串,其内容是从 start 处到 stop-1 处的所有字符,其长度为 stop 减 start。

(2)注意事项:

  • 如果 start 与 end 相等,那么该方法返回的就是一个空串(即长度为 0 的字符串)。
  • 如果 start 比 end 大,那么该方法在提取子串之前会先交换这两个参数。
  • 如果 start 或 end 为负数,那么它将被替换为 0。

2,使用样例

    var str = "0123456789"

    console.log(str.substring(3))
    console.log(str.substring(20))
        
    console.log(str.substring((3,5)))    
    console.log(str.substring((5,3)))    
    console.log(str.substring((5,20)))  

运行结果如下:


三、使用 substr() 截取

1,函数说明

substr方法用于返回一个从指定位置开始的指定长度的子字符串。

语法如下:

stringObject.substr(start, length)

start(必需):所需的子字符串的起始位置。字符串中的第一个字符的索引为 0。
length(可选):在返回的子字符串中应包括的字符个数。

(2)注意事项:

  • 如果 length 为 0 或负数,将返回一个空字符串。
  • 如果没有指定 length,则子字符串将延续到 stringObject 的最后。
  • 如果 start 或 length 为负数,那么它将被替换为 0。

2,使用样例

    var str = "0123456789"

    console.log(str.substr(3))
    console.log(str.substr(20))

    console.log(str.substr(3,5))
    console.log(str.substr(5,3))
    console.log(str.substr(5,20))

    console.log(str.substr(5,-3))
    console.log(str.substr(-5,3))

运行结果如下:


附:其他一些常用的方法

下面这些函数可以辅助我们进行字符串的截取工作。

1,indexOf()

返回字符串中匹配子串的第一个字符的下标。

语法

stringObject.indexOf(searchvalue,fromindex)


说明

该方法将从头到尾地检索字符串 stringObject,看它是否含有子串 searchvalue。开始检索的位置在字符串的 fromindex 处或字符串的开头(没有指定 fromindex 时)。如果找到一个 searchvalue,则返回 searchvalue 的第一次出现的位置。stringObject 中的字符位置是从 0 开始的。

var str = "JavaScript";
var i1 = str.indexOf("a"); //1
var i2 = str.indexOf("S"); //4
var i3 = str.indexOf("Script"); //4
var i4 = str.indexOf("k"); //-1
 
console.log("原始字符串:", str);
console.log("a的索引:", i1);
console.log("S的索引:",i2);
console.log("Script的索引:",i3);
console.log("k的索引:",i4);

运行结果如下:


2,lastIndexOf()

语法

string.lastIndexOf(searchvalue,start)

该方法返回从右向左出现某个字符或字符串的首个字符索引值(与 indexOf 相反)

var str = "JavaScript";
var i1 = str.lastIndexOf("a"); //3
var i2 = str.lastIndexOf("S"); //4
var i3 = str.lastIndexOf("Script"); //4
var i4 = str.lastIndexOf("k"); //-1

3,split()

语法

stringObject.split(separator,howmany)

使用一个指定的分隔符把一个字符串分割存储到数组。

var str = "jpg|bmp|gif|ico|png";
var arr= str.split("|");
console.log(arr);

运行结果如下:


4,join()

语法

arrayObject.join(separator)

使用一个指定的分隔符将一个数组合并为一个字符串。如果省略该参数,则使用逗号作为分隔符。

var arr= new Array("jpg","bmp","gif","ico","png");
var str = arr.join("|");
console.log(str);

运行结果如下:


5,concat()

concat() 方法用于连接两个或多个数组。
语法

arrayObject.concat(arrayX,arrayX,......,arrayX)

返回值
返回一个新的数组。该数组是通过把所有 arrayX 参数添加到 arrayObject 中生成的。如果要进行 concat() 操作的参数是数组,那么添加的是数组中的元素,而不是数组。

var arr1 = [1, 2, 3];
var arr2 = [4, 5, 6];
var arr3 = arr1.concat(arr2);
console.log(arr3);

运行结果如下:


6,charAt()

返回指定位置的字符。字符串中第一个字符的下标是 0。如果参数 index 不在 0 与 string.length 之间,该方法将返回一个空字符串。

var str = "abcdefg";
var char = str.charAt(2);  //c
console.log(char);

运行结果如下:


最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 215,723评论 6 498
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,003评论 3 391
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 161,512评论 0 351
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,825评论 1 290
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,874评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,841评论 1 295
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,812评论 3 416
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,582评论 0 271
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,033评论 1 308
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,309评论 2 331
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,450评论 1 345
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,158评论 5 341
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,789评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,409评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,609评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,440评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,357评论 2 352

推荐阅读更多精彩内容