ES6基础语法之字符串扩展

最新推荐文章于 2021-12-02 14:13:14 发布

Blockchain Explorer

最新推荐文章于 2021-12-02 14:13:14 发布

阅读量234

点赞数

分类专栏： JavaScript/ES6/NodeJS 文章标签：模板字符串字符串扩展 Includes() startsWith() endsWith()

本文链接：https://blog.csdn.net/TDCQZD/article/details/82390712

版权

JavaScript/ES6/NodeJS 专栏收录该内容

79 篇文章 0 订阅

订阅专栏

一、模板字符串

1、传统的 JavaScript 输出模板

传统的 JavaScript 语言，输出模板通常是这样写的

node.innerHTML=
  'There are <b>' + basket.count + '</b> ' +
  'items in your basket, ' +
  '<em>' + basket.onSale +
  '</em> are on sale!';

2、 template string

模板字符串是增强版的字符串，用反引号（`）标识。它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。
嵌入变量或属性值:${name} / ${obj.name}。
如果在模板字符串中需要使用反引号，则前面要用反斜杠转义。

    let greeting = `\`Yo\` World!`;

代码示例：

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
   <!-- 姓名：<b>obj.name</b> <br>
    年龄：<b>obj.age</b> <br>-->
</body>
<script>
    window.onload=function () {
        var obj = {
            name:"damu",
            age:18
        }

        document.body.innerHTML += ` 姓名：<b>${obj.name}</b> <br>年龄：<b>${obj.age}</b> <br>`
        // document.body.innerHTML += "姓名：<b>"+obj.name+"</b><br>" + "年龄：<b>"+obj.age+"</b> <br>";
    }

</script>

二、新增API

传统上，JavaScript 只有indexOf方法，可以用来确定一个字符串是否包含在另一个字符串中。indexOf() 方法返回调用 String 对象中第一次出现的指定值的索引; 如果没有找到 -1。

str.indexOf(searchValue[, fromIndex])
fromIndex 可选
        表示调用该方法的字符串中开始查找的位置。可以是任意整数。默认值为 0。
        如果 fromIndex < 0 则查找整个字符串（如同传进了 0）。
        如果 fromIndex >= str.length，则该方法返回 -1。
        当被查找的字符串是一个空字符串，
        fromIndex <= 0 时返回0，
        0 < fromIndex <= str.length时返回fromIndex，
        fromIndex > str.length时返回str.length

1、Includes()
String.prototype. includes()：返回布尔值，表示是否找到了参数字符串。
2、startsWith()
String.prototype. startsWith()：返回布尔值，表示参数字符串是否在原字符串的头部。
3、endsWith()
String.prototype. endsWith()：返回布尔值，表示参数字符串是否在原字符串的尾部
4、 repeat()

String.prototype. repeat():

repeat() 构造并返回一个新字符串，该字符串包含被连接在一起的指定数量的字符串的副本。
语法：let resultString = str.repeat(count);
参数：count
介于0和正无穷大之间的整数 : [0, +∞) 。表示在新构造的字符串中重复了多少遍原字符串。
返回值：包含指定字符串的指定数量副本的新字符串
5、 padStart()

String.prototype.padStart()

padStart() 方法用另一个字符串填充当前字符串(重复，如果需要的话)，以便产生的字符串达到给定的长度。填充从当前字符串的开始(左侧)应用的
语法：str.padStart(targetLength [, padString])
参数：
targetLength：当前字符串需要填充到的目标长度。如果这个数值小于当前字符串的长度，则返回当前字符串本身
padString：填充字符串。如果字符串太长，使填充后的字符串长度超过了目标长度，则只保留最左侧的部分，其他部分会被截断
返回值：一个新的字符串
6、 padEnd()
与padStart相反

代码示例：

<script>
    let str = "atguigu-damu";
    console.log(str.includes("damu"));//true
    console.log(str.startsWith("damu"));//false
    console.log(str.endsWith("damu"));//true

    console.log("123".repeat(3));//123123123
    console.log("123".padStart(7,"abcdefgh"))//abcd123
    console.log("123".padEnd(7,"abcdefgh"))//123abcd
</script>