• 不要再混淆js的substring和substr了!(附js所有字符串方法)


    一、字符串操作方法

    js中字符串方法操作有很多:concat、indexOf....
    这里只要介绍两种经常混淆的字符串截取方法:substringsubstr

    二、从例子入手

    let str = 'xiaobe'
    //substring(start,end)
    let str1 = str.substring(1,2);
    
    //substr(start,length)
    let str2 = str.substr(1,2);
    
    console.log(str1);  //i
    console.log(str2);  //ia
    

    可以看到str1输出的长度为1,str2输出长度为2.

    substring

    概念:返回字符串的一个子串,传入参数是起始位置和结束位置。

    不取结束位置的字符

    substr

    返回字符串的一个子串,传入参数是起始位置和长度

    substr是根据长度取值,所以上面例子,两个方法虽然参数相同,但是返回值不同

    三、特殊情况

    substring
    1. 仅有一个入参
    let str = 'xiaobe'
    let str1 = str.substring(1);
    console.log(str1);  //iaobe
    

    当只有一个入参的时候,会自动输出后面所有字符

    1. 入参的start>end
    let str = 'xiaobe'
    let str1 = str.substring(3,1);
    console.log(str1);  //ia
    

    当读取位置大于结束位置的时候,substring会自动调整位置

    1. 如果end为负数
    let str = 'xiaobe'
    let str1 = str.substring(3,-1);
    console.log(str1);  //xia
    

    当end为负数的时候,substring会输出start之前的字符

    注意,start的最后一位依然是不会取到的

    substr
    1. end为负数
    let str = 'xiaobe'
    let str1 = str.substring(3,-1);
    console.log(str1);  // 
    

    substr会输出空。毕竟length为负数,自然不会输出东西

    四、扩展

    其实substring和substr的关系与slice和splice关系相似

    slice(start,end)

    用法和substring类似,取值:[start,end)

    //当end为负数时候
    let str = 'xiaobe'
    let str3 = str.slice(1,-1);
    console.log(str3)   //iaobe
    

    substring会倒序输出,而slice会输出后续全部

    slice方法可用于字符串和数组

    下面介绍一个和slice方法很像的方法,但是这个方法仅仅使用于数组

    splice(start,length,item1,item2....)
    参数 描述
    start 必需。整数,规定添加/删除项目的位置,使用负数可从数组结尾处规定位置
    length 必需。要删除的项目数量。如果设置为 0,则不会删除项目。
    item1...itemX 可选。向数组添加的新项目。

    splice会改变原数组 slice不会。

    五、js字符串方法大全

    转载:https://www.cnblogs.com/l1pe1/p/6197371.html

    • concat
    将两个或多个字符的文本组合起来,返回一个新的字符串。
    var a = "hello";
    var b = ",world";
    var c = a.concat(b);
    alert(c);
    //c = "hello,world"
    
    • indexOf
    //返回字符串中一个子串第一处出现的索引(从左到右搜索)。如果没有匹配项,返回 -1 。
    var index1 = a.indexOf("l");
    //index1 = 2
    var index2 = a.indexOf("l",3);
    //index2 = 3
    
    • charAt
    //返回指定位置的字符。
    var get_char = a.charAt(0);
    //get_char = "h"
    lastIndexOf
    返回字符串中一个子串最后一处出现的索引(从右到左搜索),如果没有匹配项,返回 -1 。
    var index1 = lastIndexOf('l');
    //index1 = 3
    var index2 = lastIndexOf('l',2)
    //index2 = 2
    
    • match
    //检查一个字符串匹配一个正则表达式内容,如果么有匹配返回 null。
    var re = new RegExp(/^w+$/);
    var is_alpha1 = a.match(re);
    //is_alpha1 = "hello"
    var is_alpha2 = b.match(re);
    //is_alpha2 = null
    
    • substring
    //返回字符串的一个子串,传入参数是起始位置和结束位置。
    var sub_string1 = a.substring(1);
    //sub_string1 = "ello"
    var sub_string2 = a.substring(1,4);
    //sub_string2 = "ell"
    
    • substr
    //返回字符串的一个子串,传入参数是起始位置和长度
    var sub_string1 = a.substr(1);
    //sub_string1 = "ello"
    var sub_string2 = a.substr(1,4);
    //sub_string2 = "ello"
    
    • replace
    //用来查找匹配一个正则表达式的字符串,然后使用新字符串代替匹配的字符串。
    var result1 = a.replace(re,"Hello");
    //result1 = "Hello"
    var result2 = b.replace(re,"Hello");
    //result2 = ",world"
    
    • search
    //执行一个正则表达式匹配查找。如果查找成功,返回字符串中匹配的索引值。否则返回 -1 。
    var index1 = a.search(re);
    //index1 = 0
    var index2 = b.search(re);
    //index2 = -1
    
    • slice
    //提取字符串的一部分,并返回一个新字符串(与 substring 相同)。
    var sub_string1 = a.slice(1);
    //sub_string1 = "ello"
    var sub_string2 = a.slice(1,4);
    //sub_string2 = "ell"
    
    • split
    通过将字符串划分成子串,将一个字符串做成一个字符串数组。
    var arr1 = a.split("");
    //arr1 = [h,e,l,l,o]
    length
    返回字符串的长度,所谓字符串的长度是指其包含的字符的个数。
    var len = a.length();
    //len = 5
    
    • toLowerCase
    //将整个字符串转成小写字母。
    var lower_string = a.toLowerCase();
    //lower_string = "hello"
    toUpperCase
    将整个字符串转成大写字母。
    var upper_string = a.toUpperCase();
    //upper_string = "HELLO"
    
  • 相关阅读:
    WPA/WPA2无法暴力破解
    被书本知识所边缘化的软件工程师
    栈和队列
    Oracle update 之部分更新
    SAAS之初体验
    Entity Framework
    ResourceWriter和ResxResourceWriter的區別
    C#中將顏色轉換成網頁16進制顏色代碼
    Javascript功能代码收集(不断更新中...)
    .net1.1转换成更高版本的问题总结
  • 原文地址:https://www.cnblogs.com/soyxiaobi/p/9518863.html
Copyright © 2020-2023  润新知