web前端—前端三剑客之JS-ES6(8)：字符串、数值

最新推荐文章于 2024-09-19 17:56:32 发布

觅远

最新推荐文章于 2024-09-19 17:56:32 发布

阅读量143

点赞数

分类专栏： web前端文章标签： javascript

本文链接：https://blog.csdn.net/jby2020/article/details/118996938

版权

web前端专栏收录该内容

18 篇文章 0 订阅

订阅专栏

数值方法，见菜鸟

菜鸟教程：https://www.runoob.com/w3cnote/es6-string.html

模板字符串相当于加强版的字符串，用反引号 `，使用场景：

作普通字符串
模板字符串支持多行字符串的格式换行，看起来更加简明
支持插入变量和表达式

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>字符串</title>
</head>

<body>
    <div id="box1"></div>
    <div id="box2"></div>
    <div id="box3"></div>
    <script>
        let str1 = '123abc哈哈哈';
        let arr = {
            includes: function strfind(str) {  // 判断某个子字符串是否在字符串中，返回布尔值
                console.log(str1.includes(str));
            },
            startsWith: function startsWith(str, index = 0) {  // 判断参数字符串是否在原字符串的头部（未传第二个参数时），如果第二个参数指定了开始查找的位置，则判断这个索引位置的子字符串是否是预期的结果，返回布尔值
                console.log(str1.startsWith(str, index));
            },
            endsWith: function endsWith(str) {   // 判断参数字符串是否在原字符串的尾部，返回布尔值
                console.log(str1.includes(str));
            },
            indexOf: function indexOf(str) {   // 从前开始查找返回索引
                console.log(str1.indexOf(str));
            },
            lastIndexOf: function lastIndexOf(str) {   // 从后开始倒着查找返回索引
                console.log(str1.lastIndexOf(str));
            },
            repeat: function repeat(times) {   // 字符串重复，括号里面指定重复的次数
                // 1、参数是小数时，向下取整
                // 2、参数是 0 至 -1 之间的小数，会进行取整运算，0 至 -1 之间的小数取整得到 -0 ，等同于 repeat 零次
                // 3、如果参数是 NaN，等同于 repeat 零次
                // 4、如果参数是负数或者无穷数：Infinity ，会报错
                // 5、参数是字符串，则会先将字符串转化为数字
                console.log(str1.repeat(times));
            },
            padStart: function padStart(minlen, padstr = ' ') {   // 返回新的字符串，表示用参数字符串从头部（左侧）补全原字符串,两个参数，第一个为字符串最小补全长度，第二个是用来补全的子字符，默认是空格填充
                console.log(str1.padStart(minlen, padstr));
            },
            padEnd: function padEnd(minlen, padstr = ' ') {   // 返回新的字符串，表示用参数字符串从尾部（右侧）补全原字符串
                console.log(str1.padEnd(minlen, padstr));
            },
        };
        arr.includes('abc');
        arr.startsWith('哈', 8);
        arr.indexOf('b');
        arr.repeat(3.8);
        arr.padStart(12, '0');
        console.log('1'.padStart(5));


        // 模板字符串
        let b1 = document.getElementById('box1');
        let b2 = document.getElementById('box2');
        let b3 = document.getElementById('box3');
        let string1 = `hello\n你好`;
        b1.innerText = string1;


        let person = {
            name: '孙武',
            age: 76,
            time: '东周'
        };
        let styleb2 = `style="color: red;font-size: 25px;"`;
        let b2html = `<ul>
            <li ${styleb2} class="li1">姓名：${person.name}</li>
            <li ${styleb2} class="li2">年龄：${person.age}</li>
            <li ${styleb2} class="li3">时代：${person.time}</li>
        </ul>`;

        // let b2html = '<ul><li class="li1"></li><li class="li2"></li><li class="li3"></li></ul>';  // 使用''不能换行，添加变量需要用加号拼接
        b2.innerHTML = b2html;

    </script>
</body>

</html>