美文网首页
前端基础(一):字符串String常用操作

前端基础(一):字符串String常用操作

作者: 张奇_ | 来源:发表于2018-10-09 11:00 被阅读0次

    一、String 的属性

    1.1 length 属性

    获取字符串的长度,需要特别注意的是:JavaScript 中的中文每个汉字也只代表一个字符,可能跟其他语言不同。

    '中国'.length  // 2
    

    1.2 prototype 属性

    在 OOP 中经常用到,用来给对象添加属性或方法,且添加的属性或方法在所有实例上共享。因此常用来扩展 JavaScript 对象,如下面的代码给 String 添加了一个去除两边空格的方法。

    String.prototype.trim = function(){
        return this.replace(/^\s*|\s*$/g,'');
    }
    

    二、String 的方法

    2.1 charAt(index)

    获取指定位置的字符串,从 0 到 str.length - 1

    var str = 'abcdef';
    charAt(2);  // 'c'
    charAt(2);  // ''
    

    2.2 charCodeAt(index)

    返回指定位置字符的 unicode 编码

    var str = "abcde";
    console.log(str.charCodeAt(0));  // 97
    

    2.3 查找类方法

    2.31 indexOf(searchValue, fromIndex)

    用来检索指定的字符串首次出现的位置,fromIndex 可以省略,省略的话从 0 开始检索。

    var str = 'abcdeabcde';
    str.indexOf('a');  // 0
    str.indexOf('a', 3);  // 5
    str.indexOf('bc');  // 1
    

    2.32 includes(), startsWith(), endsWith()

    传统上,我们通常使用 indexOf 方法来确定,一个字符串是否包含在另一个字符串中。ES6 又提供了三种新方法。

    • includes(): 返回布尔值,表示是否找到了参数字符串。
    • startsWith(): 返回布尔值,表示参数字符串是否在原字符串的头部。
    • endsWith(): 返回布尔值,表示参数字符串是否在原字符串的尾部。
    let str = 'Hello world!';
    str.startsWith('Hello');  // true
    str.endsWith('!');  // true
    str.includes('o');  // true
    

    这三个方法都支持第二个参数,表示开始搜索的位置。

    let str = 'Hello world!';
    str.startsWith('world', 6);  // true
    str.endsWith('Hello', 5);  // true
    str.includes('Hello', 1);  // false
    

    可见,使用第二个参数 n 时,endsWith 的行为与其他两个方法不同。它针对前 n 个字符,而其他两个方法针对从第 n 个位置直到字符串结束。

    2.33 lastIndexOf(searchValue, fromIndex)

    用来检索指定的字符串最后出现的位置,检索顺序从后向前。

    var str = 'abcdeabcde';
    console.log(str.lastIndexOf('a'));  // 5
    console.log(str.lastIndexOf('a', 3));  // 0 从第索引3的位置往前检索
    console.log(str.lastIndexOf('bc'));  // 6
    

    2.34 search()

    str.search(subStr), str.search(regExp) 用于检索字符串中指定的子字符串,或与正则表达式相匹配的子字符串。它返回第一个子字符串的起始位置,如未匹配到,则返回 -1。

    var str = 'abcDEDF';
    console.log(str.search('c'));  // 2
    console.log(str.search('d'));  // -1
    console.log(str.search(/d/i));  // 3
    

    2.35 match()

    str.match(subStr), str.match(regExp) 在字符串内检索指定的值,或找到一个(或多个)正则表达式的匹配。

    如果参数中传入的是子字符串或没有全局匹配的正则表达式,则match方法从开始位置进行一次匹配,若未匹配到则返回null,否则返回一个数组。

    var str = '1a2b3c4d5be';
    console.log(str.match('h'));  // null
    console.log(str.match('b'));  // ["b", index: 3, input: "1a2b3c4d5e"]
    console.log(str.match(/b/));  // ["b", index: 3, input: "1a2b3c4d5e"]
    

    如果参数中传入的是具有全局匹配的正则表达式,那么match从开始位置进行多次匹配,直到最后。如没有匹配到结果,则返回null。否则返回一个数组,数组中存放所有复合要求的子字符串,且没有index和input属性。

    var str = '1a2b3c4db5e';
    console.log(str.match(/h/g));  // null
    console.log(str.match(/\d/g));  // ["1", "2", "3", "4", "5"]
    console.log(str.match(/b/g));  // ["b", "b"]
    

    2.4 截取类方法

    2.41 substring(start, end)

    这是最常用到的字符串截取方法,可接受两个参数(参数不能为负),分别是要截取的起始和结束位置。它将返回一个新的字符串,其内容是从start到end-1处的所有字符。若结束参数end省略,则表示从起始位置一直截取到最后。

    var str = 'abcdefg';
    console.log(str.substring(1, 4));  // bcd
    console.log(str.substring(1));  // bcdefg
    console.log(str.substring(-1));  // abcdefg,传入负值时会视为0
    

    2.42 substr(start, length)

    在字符串中抽取从start下标开始的指定长度的字符,其返回值是一个字符串,包含从start处开始的length个字符。若没有指定length,则为从start处开始到结尾的字符。若start为负数,则表示从字符串尾部开始算起。

    var str = 'abcdefg';
    console.log(str.substr(1, 3));  // bcd
    console.log(str.substr(2));  // cdefg
    console.log(str.substr(-2, 4));  // fg,目标长度较大的话,以实际截取的长度为准
    

    2.43 slice(start, end)

    slice() 方法与 substring() 类似,它传入的两个参数也分别对应着开始和结束位置。区别在于,slice 中的参数可以为负,若参数为负,则该参数规定的是从字符串尾部开始计算起的位置。也就是说,-1 指字符串的最后一个字符。

    var str = 'abcdefg';
    console.log(str.slice(1, 4));  // bcd
    console.log(str.slice(-3, -1));  // ef
    console.log(str.slice(1, -1));  // bcdef
    console.log(str.slice(-1, -3));  // "" 若传入的参数有问题,则返回空
    

    2.5 其他方法

    2.51 replace()

    替换匹配的值,接受两个参数,第一个是搜索模式,第二个是替换的内容。

    // replace的一个应用,就是用来消除字符串首尾两端的空格
    var str = "  hello world  ";
    str.replace(/^\s+|\s+$/g, '');
    

    replace() 方法的第二个参数还可以是个函数,将每一个匹配内容替换为函数返回值。

    '3 and 5'.replace(/\d/g,function(match){
        return 2 * match;
    });  // "6 and 10"
    

    2.52 split(separator, howmany)

    该方法用于把字符串分割成字符串数组,第一个参数表示分割位置(参考符),第二个参数表示返回数组的允许最大长度。

    var str = 'a|b|c|d|e';
    console.log(str.split('|'));  // ["a", "b", "c", "d", "e"]
    console.log(str.split('|', 3));  // ["a", "b", "c"]
    console.log(str.split(''));  // ["a", "|", "b", "|", "c", "|", "d", "|", "e"]
    

    也可以用正则来切割

    var str = 'a1b2c3d4e';
    console.log(str.split(/\d/));  // ["a", "b", "c", "d", "e"]
    

    2.53 toLowerCase() 和 toUpperCase()

    字母大小写转化

    var str = 'JavaScript';
    console.log(str.toLowerCase());  // javascript
    console.log(str.toUpperCase());  // JAVASCRIPT
    

    相关文章

      网友评论

          本文标题:前端基础(一):字符串String常用操作

          本文链接:https://www.haomeiwen.com/subject/ctdeaftx.html