ES6字符串拓展

最新推荐文章于 2024-08-15 22:39:32 发布
最新推荐文章于 2024-08-15 22:39:32 发布
阅读量137 收藏
点赞数
分类专栏： 前端开发 文章标签： ES6字符串拓展
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41760521/article/details/102677085
版权

字符串的基本使用：

多行字符串、字符串中变量的拼接。

以下分别是传统和ES6字符串的换行与变量拼接的方法：

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

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

<body>

    <!-- 
        字符串的拓展：
        多行字符串，
        字符串中拼接变量
     -->
    <script>
        let age1 = 10;
        // 没有实现换行，拼接
        let msg1 = "hellohel\lohello";
        // 实现换行，拼接
        let msg2 = "hellohel\n\lohello";
        // 加法运算拼接变量
        let msg3 = "heoollll" + "njdjjskk" + age1;
        /*
           模板字符串基本语法：
           反引号 `字符串`
           替换位的使用${}
        */
        let event1 = `一起去看好妹妹演唱会`;
        let event2 = `
        一起去看
        好妹妹
        演唱会`;
        // let event3 = `一起去看好妹妹${age1}演唱会`;
        // ${}中可以是表达式
        let event3 = `一起去看好妹妹${age1+10}演唱会`;
        // 推荐网站掘金
    </script>
</body>

</html>

 实例：使用模板字符串拼接：（若使用传统方式需要通过“+”拼接，比较繁琐）

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

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

<body>
    <ul id="myUl">
        <!-- <li>
            <h3></h3>
            <p></p>
        </li> -->
    </ul>
    <script>
        let arr = [{
            title: "面试官问1: 谈谈你对JavaScript基本数据类型:BigInt的理解",
            like: "200"
        }, {
            title: "面试官问2: 谈谈你对JavaScript基本数据类型:BigInt的理解",
            like: "100"
        }, {
            title: "面试官问3: 谈谈你对JavaScript基本数据类型:BigInt的理解",
            like: "300"
        }, {
            title: "面试官问4: 谈谈你对JavaScript基本数据类型:BigInt的理解",
            like: "500"
        }];
        let myUl = document.getElementById('myUl');
        let html = "";
        //该方法的三个参数：forEach(item,index,arr)
        arr.forEach(function(item) {
            html += `
        <li>
            <h3>${item.title}</h3>
            <p>${item.like}</p>
        </li> `
        })
        myUl.innerHTML = html;
    </script>
</body>

</html>

 结果图：

ES6新增字符串方法：

    String.prototype.startsWith是否以“字符或字符串”开头

    String.prototype.endsWith：是否以“字符或字符串”结尾

    String.prototype.includes：判断一个字符或一串字符是否在当前字符串内

    String.prototype.repeat：重复字符串

 ①String.prototype.includes：

        let msg = "hello";
        // indexof可以得到当前字符或一串字符的索引位置
        console.log(msg.indexOf("h")); //结果为0
        console.log(msg.indexOf("a")); //结果为-1

判断结果为负：说明字符串中没有该字符或字符串，所以，使用传统的方法需要判断结果是否为正整数

includes方法可以解决上述不足问题：

        let msg = "hello";
        console.log(msg.includes("h")); //结果为true
        console.log(msg.includes("a")); //结果为false

includes(“查找的字符或字符串”，索引（从什么位置开始），查找的数组)

console.log(msg.includes("h", 2)); //结果为false
//从2位置开始查找字符“h”

使用ES5实现：（考虑兼容性）

    <script>
        // 判断浏览器是否支持includes方法
        if (!String.prototype.includes) {
            String.prototype.includes = function(search, start) {
                // 若传的start值不是数字类型
                if (typeof start != "number") {
                    start = 0;
                }
                if (start + search.length > this.length) {
                    return false;
                } else {
                    return this.indexOf(search, start) !== -1;
                }
            }
        }
    </script>

②：String.prototype.startsWith  /   String.prototype.endsWith

他们也同样有两个参数，判断是否以“ ” 开头或结尾；第二个参数代表判断位置；结果为

    <script>
        let msg = "world";
        msg.startsWith("w"); //结果为true
        msg.startsWith("wor"); //结果为true
        msg.startsWith("h"); //结果为false
        msg.startsWith("w", 1); //结果为false,第二个参数：判断从该索引开始的字符串是否以第一个 
        参数开始
        msg.startsWith("o", 1); //结果为true
    </script>

注：String.prototype.endsWith的第二个参数：

    <script>
        let msg = "world";
        msg.endsWith("d"); //结果为true
        msg.endsWith("r"); //结果为false
        msg.endsWith("r", 3); //结果为true，判断索引之前的（不包括该位）是否以第一参数结尾
    </script>

③：String.prototype.repeat：

msg.repeat(3);//结果为：worldworldworld

 

我本浪人--游吟世间
关注
专栏目录
ES6 字符串的拓展
Tian_____的博客
03-02 216
1.字符串的遍历接口 1）在ES6中，字符串可以进行for…of循环 for (let codePoint of 'foo') { console.log(codePoint) } // "f" // "o" // "o" 2.模板字符串 在不使用模板字符串的时候，我们一般使用字符串的拼接(Jquery) $('#result').append( 'There are <b>...
ES6字符串拓展方法
freya_Du的博客
01-10 369
ES6字符串的扩展方法及模版字符串ES6加强了对unicode的支持示例总结字符串扩展api1.判断字符串是否包含指定字符串的几个方法2.字符串补全的方法3.模版字符串 ES6加强了对unicode的支持 ES5中js允许采用/uXXXX的形式表示一个字符，XXXX表示字符的unicode码点。 这种码点只限于\uXXXX~\uFFFF之间的字符。超过这个范围，必须使用双字节的形式表示，但是ES5...
ES6字符串匹配函数
个人博客
03-19 959
ES6字符串匹配函数一、三个匹配函数1. Arrary.includes()2. Arrary.startsWith()3. Arrary.endsWith()二、具体使用1. Arrary.includes()2. Arrary.startsWith()3. Arrary.endsWith()三、拓展使用 一、三个匹配函数 1. Arrary.includes() includes(searchString,options)：字符串是否包含指定值。 searchString：要搜索的字串（字符串类型） p
ES6字符串的拓展方法
Serena_tz的博客
03-02 111
1、子串的识别 ES6 之前判断字符串是否包含子串，用 indexOf 方法，ES6 新增了子串的识别方法。 includes()：返回布尔值，判断是否找到参数字符串。 startsWith()：返回布尔值，判断参数字符串是否在原字符串的头部。 endsWith()：返回布尔值，判断参数字符串是否在原字符串的尾部。 以上三个方法都可以接受两个参数，需要搜索的字符串，和可选的搜索起始位置索引。 let string = "apple,banana,orange"; string.includes("bana
ES6（六）——ES6 字符串
最新发布
m0_62701594的博客
08-15 720
以上两个方法接受两个参数，第一个参数是指定生成的字符串的最小长度，第二个参数是用来补全的字符串。模板字符串相当于加强版的字符串，用反引号 `,除了作为普通字符串，还可以用来定义多行字符串，还可以在字符串中加入变量和表达式。以上三个方法都可以接受两个参数，需要搜索的字符串，和可选的搜索起始位置索引。：返回新的字符串，表示用参数字符串从头部（左侧）补全原字符串。：返回新的字符串，表示用参数字符串从尾部（右侧）补全原字符串。：返回布尔值，判断参数字符串是否在原字符串的头部。
ES6 字符串的拓展方法
qq_36987708的博客
08-12 399
一、子串的识别 ES6 之前判断字符串是否包含子串，用 indexOf 方法，ES6 新增了子串的识别方法。 includes()：返回布尔值，判断是否找到参数字符串。 startsWith()：返回布尔值，判断参数字符串是否在原字符串的头部。 endsWith()：返回布尔值，判断参数字符串是否在原字符串的尾部。 以上三个方法都可以接受两个参数，需要搜索的字符串，和可选的搜索起始位置索引。 let string = "apple,banana,orange"; string.includes(
微信小程序支持ES6字符串拓展
yann02的博客
02-16 1504
1、includes(), startsWith(), endsWith() includes(n)检查字符串中是否存在指定的字符串，返回布尔值,n代表检索的起始位置，n可以不传 startsWith(n)判断字符串是否已某个字符串开头，返回布尔值,n代表检索的起始位置，n可以不传 endsWith(n)判断字符串是否以某个字符串结尾，返回布尔值,n代表检索的起始位置，n可以不传，这里要注意...
浅谈ES6字符串拓展
战斗暴龙兽的博客
07-30 173
字符串的拓展与新增方法 字符串拓展 字符串的表示法 论表示一个字符我们可以使用的方法有什么？ '\z' === 'z' //true '\172' === 'z' //true ' \x7A' === 'z' //true ' \u007A'==='z' //true ' u{7A}'=== 'z' //true 上面描述的方法都是可以用表示字符的。 在ES6中加强了对Unicode的支...
ES6基础之字符串和函数的拓展详解
10-16
字符串拓展的其他重要方法包括： 1. includes()方法：用于判断字符串中是否包含参数字符串，返回一个布尔值。 2. startsWith()方法：判断字符串是否以参数字符串开始，同样返回布尔值。 3. endsWidth()方法：判断...
Es6 字符串
qq_60690665的博客
10-24 137
拓展的方法 ES6 之前判断字符串是否包含子串，用 indexOf 方法，ES6 新增了子串的识别方法。 includes()：返回布尔值，判断是否找到参数字符串。 startsWith()：返回布尔值，判断参数字符串是否在原字符串的头部。 endsWith()：返回布尔值，判断参数字符串是否在原字符串的尾部。 以上三个方法都可以接受两个参数，需要搜索的字符串，和可选的搜索起始位置索引。 // includes()：返回布尔值，判断是否找到参数字符串。 let str = "到
JS:引入及阻塞
我本浪人--游吟世间
06-19 5139
引入JS的两种方式： ①嵌入代码：在HTML中使用（可以有多个代码块） ②引入外部文件：下载、解析、执行（从上往下） 问题？ ①：为什么元素获取不到？ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document&l...
JS:打印出10000以内的所有质数
我本浪人--游吟世间
06-19 3738
JS:打印出10000以内的所有质数 质数：（0和1都不是质数）在大于1的自然数中，只能被1和本身整除。 自然数：（0和正整数） 方法一： var count = 0; for (var i = 2; i <= 10000; i++) { for (var j = 2; j <= i; j++) { if (i % j == 0) { ...
HTML学习——简单表格嵌套实例
我本浪人--游吟世间
03-30 3003
TABLE嵌套 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>花房姑娘</title> <style> a { text-decoration: none; } table tr:fi...
使用Chrome浏览器时，console.log()语句无效的问题
我本浪人--游吟世间
10-23 2301
最近使用Chrome浏览器执行console.log()语句时，无法输出。 在网上大概看了下解决方法：按下图：将过滤器取消；Default levels选择Default;问题就可以解决了。 ...
ES6转化为ES5
我本浪人--游吟世间
10-21 1342
将ES6语法转化为ES5语法： 使用babel工具来实现：网站链接：babel官网 选择浏览器： 使用方法： EG: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" conte...
Transition过渡动画
我本浪人--游吟世间
09-04 1021
transition过渡动画 transition: property duration timing-function delay; transition-property//规定设置过渡效果的 CSS 属性的名称。 transition-duration//规定完成过渡效果需要多少秒或毫秒。 transition-timing-fun...
CSS：浮动定位与清除
我本浪人--游吟世间
06-04 995
浮动定位： （浮动定位是CSS布局中非常重要的手段之一） float浮动属性可以设置对象左右移动，直到其边缘碰到父元素的边框或另一个浮动元素的边缘。 CSS中包括DIV在内的所有元素都可以以浮动方式进行显示，其优点是浮动框不在文档的普通流（脱离文档流），使得排版更加简单，且具有良好的伸缩性。 float属性可以设置为：left、right、none、inherit ，默认值为none。 ...
es6 字符串转数组
09-01
ES6提供了多种方法来将字符串转换为数组。其中一种方法是使用拓展运算符。拓展运算符可以将字符串的每个字符作为数组的元素展开。例如，可以使用以下代码将字符串转换为数组： ```javascript let str = "hello"; let...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值