js 字符串方法大全以及模板字符串用法

墨蓝 2023-07-05 11:46 20阅读 0赞

# 什么是字符串 #

> 单引号或者双引号引起来的字符序列。

示例：

var str = 'hello';
    var str = "hi";
    var str = new String('hello');
    console.log(typeof str); //object

# 字符串操作 #

`charAt()`对应位置上的字符

`charCodeAt()`对应位置上的字符编码

`String.fromCharCode()`编码对应的字符

function fnCharAt() { 
        var str = 'China is great';
        //charAt()对应位置上的字符
        var ch = str.charAt(0); // C
        //charCodeAt()对应位置上的字符编码
        var chNum = str.charCodeAt(0); // 99 'a'--97
        //String.fromCharCode()编码对应的字符
        var ch2 = String.fromCharCode(90); // Z
        console.log(ch2);
    }

#### `indexOf()` ####

从左到右找到第一个满足的字符串的位置

function fnIndexOf() { 
        var str = 'wlecome to beijing';
        //从左到右找到第一个满足的字符串的位置
        //找不到则返回-1
        var index = str.indexOf(' '); // 7
        var index2 = str.lastIndexOf(' '); // 10 从右往左找，编号从左往右
        console.log(index,index2);
    }

#### `substr()` ####

字符串截取，`slice()`与数组`slice()`方法类似，`substr()` 不建议使用

function fnSubstr() { 
        var str = 'good good study , day day up';
        //从下标为5开始，截取后面的字符串
        var substr = str.substr(5);
        //从下标为5开始，截取4个字符
        var substr2 = str.substr(5,4);  //good
        //从下标为5开始，截取后面的字符串,此时等价于substr(5)
        var substr3 = str.substring(5)
        //从下标为5开始，截取到下标为10，不包含10
        var substr4 = str.substring(5,10);
        var substr5 = str.substring(10,5);//等价于上面
       console.log(substr2);
    }

#### `split()` ####

字符串分割，分割为数组， 数组可以通过join() 连接

function fnSplit() { 
        var str = 'what is your name?';
        var arr = str.split(" "); //['what','is','your','name?']
        console.log(arr);
    }

#### `replace()` ####

字符串替换 原数组不变

function fnReplace() { 
        var str = "tmd,祝你幸福!,tmd,永远不见";
        // var newStr = str.replace("tmd","**"); //默认替换第一个
        var newStr = str.split("tmd").join("**");
    
        console.log(newStr);
    }
    fnReplace();

#### 字符串颠倒 ####

function fnReverse() { 
        var str = 'qwjehq';
        var str1 = str.split('').reverse().join("");         
        console.log(str1);
    }

# ES6字符串 #

## 1 模板字符串 ##

模版字符串

1.  反单引号引起来
2.  遇到变量用$\{\}括起来
3.  原理 正则实现

#### 1.1 模板字符串拼接 ####

#### 1.2 模板标签 ####

//定义tag标签
    function tag(str) { 
        console.log(str); 
        console.log(arguments);// {0:['My name is ',',I am ',' years old'],1:'along',2:32} 
        let res = ''; 
        let arr = [];
        let arr2 = arguments[0];
        for(var k in arguments) { 
            if(k !=0) { 
                arr.push(arguments[k]);
            }
        }
        for(var key in arr) { 
            res += arr2[key].toUpperCase() + arr[key].toString().toUpperCase();
        }
        res += arr2[arr2.length-1].toUpperCase();
        console.log(res);   
    }
    // 模版标签，tag标签，需要定义
    let res2 = tag`My name is ${ name},I am ${ age} years old`;

## 2 es6 字符串操作 ##

`startsWith()` 以某字串开头

`endsWith()`以某字串结尾

`includes()`是否包含某字串

`repeat()` 重复

`padStart()`/`padEnd()` 填充首部填充/尾部填充

let url = 'http://www.baidu.com';
    let flag = url.startsWith('Http'); // false
    console.log(flag);
    // endWith()
    let img_name = '2.png';
    let bool = img_name.endsWith('png'); 
    console.log(bool); // true
    // includes() 是否包含某字串
    console.log('along666'.includes('L')); // false
    // repeat()
    console.log('abc'.repeat(3));
    // padStart()/padEnd()
    console.log('0'.padStart(8,9)); // 8总长度 9填充字符 '99999990'
    console.log('0'.padEnd(8,9)); // 09999999