字符串新增特性

模板字符串

什么是模板字符串？

使用反引号表示的字符串

相对于使用单引号或双引号定义的字符串，模板字符串有如下特点：

1. 模板字符串中可以直接写换行
2. 模板字符串通过 ${} 可以直接插入变量后者表达式
3. 模板字符串中可以直接调用函数

`User ${user.name} is not authorized to do ${action}.`

`${x} + ${y} = ${x + y}`

`foo ${fn()} bar`

`
锄禾日当午
汗滴禾下土
谁知盘中餐
粒粒皆辛苦
`

模版字符串案例

html

<body>
    <ul id="box">
        <li>
            <span>1</span> 
            <a href="">刘姥姥</a> 
        </li>
    </ul>
    <script>
        // 创建字符串
        const msg = `Hello World`;
        console.log(typeof msg);
        console.log(msg);
        console.log('');

        // 模板字符串中直接写换行
        const content = `
        锄禾日当午
        汗滴禾下土
        水质盘中餐
        粒粒皆辛苦
        `;
        console.log(content);


        // 模板字符串直接插入变量
        const name = '高小乐';
        const gender = '男';
        const hometown = '山西';
        const hobby = '醋';
        const money = .25;

        // 拼接字符串
        const message = `
        我的名字叫${name},
        性别${gender},
        我来自${hometown},
        我的业余爱好是${hobby},
        我会进行运算${money + 78 * 2}
        我学习后的期望薪资是${money} K;`;
        console.log(message);
        

        // 定义数组
        const data = ['刘姥姥', '马姥姥', '司马姥姥', '欧阳姥姥', '宇文姥姥'];
        const html = data.map(function(item, index) {
            return `
            <li>
                <span>${index+1}</span> 
                <a href="#">${item}</a> 
            </li>
            `
        }).join('');
        var box = document.querySelector('#box');
        box.innerHTML = html;

        
    </script>
</body>

字符串实例新增方法

ES5 方法：

charAt()			返回指定位置的字符，参数是指定的索引
charCodeAt()		返回指定位置的字符的unicode编码，，参数是指定的索引
indexOf()			返回指定的内容在字符串中第一次出现的位置（索引），参数就是指定的内容
lastIndexOf()		返回指定的内容在字符串中最后一次出现的位置（索引），参数就是指定的内容
slice()				截取字符串并返回，参数指定开始位置和结束位置（结束位置字符不包括在内），不设置第二个参数截取到最后
substring()			截取字符串并返回，规则同上
substr()			截取字符串并返回，参数指定开始位置和截取长度，不设置第二个参数截取到最后
toLowerCase()		将字符串所有字母转为小写并返回，不需要参数
toUpperCalse()		将字符串所有字母转为大写并返回，不需要参数
split()				分隔字符串返回数组，参数指定分隔符，''代表空字符串
search()			参数是正则表达式，返回字符串中第一个满足正则的部分的索引，无法匹配返回 -1
match()				参数是正则表达式，匹配成功返回数组，无法匹配返回 null
replace()			进行替换，第一个参数可以是正则表达式，可以是字符串；默认只替换一个，替换所有需要进行全局匹配

ES6 + 方法：

repeat()		字符串重复，参数是 [重复次数] 返回新字符串
includes()		判断是否包含某个值，参数是['字符串'][索引位置]，返回布尔值
startsWith()	判断是否以某个值开始，参数是['字符串'][索引位置]，返回布尔值
endsWith()		判断是否以某个值结尾，参数是['字符串'][从尾找的长度]，返回布尔值
trim()			去掉两端的空格
trimStart()		去掉前面的空格（ES2019）
trimEnd()		去掉后面的空格（ES2019）
padStart()		字符串填充，参数是[填充的长度]['填充的内容']，填充到前面（ES2017）
padEnd()		字符串填充，参数是[填充的长度]['填充的内容']，填充到后面（ES2017）
replaceAll()	替换字符串中指定内容，参数是替换的内容，替换所有（ES2021）

案例

console.log('高小乐'.repeat(10));	// 

const msg = 'Hello World';
console.log(msg.includes('l')); //true
console.log(msg.includes('World')); //true
console.log(msg.includes('H', 5)); 第5个参数后往后找 //false

console.log(msg.startsWith('Hello'));
console.log(msg.startsWith('Hello', 1));
console.log(msg.endsWith('d'));
console.log(msg.endsWith('d', 5));

console.log(msg.startsWith('Hello'));
console.log(msg.startsWith('Hello', 1));
console.log(msg.endsWith('d'));
console.log(msg.endsWith('d', 5));
console.log('');


console.log(msg.padStart(20));
console.log(msg.padStart(20, '@'));
console.log(msg.padStart(20, '^--^'));
console.log(msg.padEnd(30));
console.log(msg.padEnd(30, '0'));
console.log('');


const content = '    Hello World             ';
console.log(`#${content}#`);
console.log(`#${content.trim()}#`);
console.log(`#${content.trimStart()}#`);
console.log(`#${content.trimEnd()}#`);
console.log('');

console.log(content.replace('l', 'L'));
console.log(content.replaceAll('l', 'L'));

字符串新增特性 ​

模板字符串 ​

字符串实例新增方法 ​

​

字符串新增特性

模板字符串

字符串实例新增方法