ES6系列笔记-字符串方法和字符串模板

简介: ES6系列笔记-字符串方法和字符串模板

两个新方法

1:startsWith(判断开头)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
    </body>
    <script>
        let  str="wqfge"
        //判断字符串是否是以w开头的,返回true则代表是的,返回false代表不是
        console.log(str.startsWith('a'))
    </script>
</html>

简单示例:判断网页链接开头的状态

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
    </body>
    <script>
        /* let  str="wqfge"
        //判断字符串是否是以w开头的,返回true则代表是的,返回false代表不是
        console.log(str.startsWith('a')) */
        let  str='https://www.bilibili.com/video/av20327829?p=8'
        if(str.startsWith('http://')){
            alert('普通网址')
        }
        else  if(str.startsWith('https://')){
            alert('加密网址')
        }
        else  if(str.startsWith('git://')){
            alert('加密网址')
        }
    </script>
</html>

2:endWith(判断结尾)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
    </body>
    <script>
        let  str="wqfge"
        //判断字符串是否是以e结尾的,返回true则代表是的,返回false代表不是
        console.log(str.endsWith('e'))
    </script>
</html>

打印结果


简单示例:判断文件的后缀

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
    </body>
    <script>
        //endWith
        let str = '1.png';
        if (str.endsWith('.txt')) {
            alert("文本文件")
        } else if (str.endsWith('.jpg')) {
            alert("jpg")
        } else if (str.endsWith('.png')) {
            alert("png")
        }
    </script>
</html>

字符串模板

美元符号+花括号作用就是将定义好的变量a塞进字符串里面

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
    </body>
    <script>
        //反单引号,就是字符串模板
        let q = 22;
        let str = `a${q}s`; //美元符号+花括号作用就是将定义好的变量a塞进字符串里面
        console.log(str)
    </script>
</html>

打印结果如下:

小案例对比:

一般拼接

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
    </body>
    <script>
        let title = "标题";
        let content = "内容";
        //一般拼接方法,不能折行
        let str = '<div>\
                  <h1>' + title + '</h1>\
                  <p>' + content + '</p>\
                  </div>';
        console.log(str)
    </script>
</html>

字符串模板拼接

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
    </body>
    <script>
        let title = "标题";
        let content = "内容";
        //模板字符串
        //反单引号,就是字符串模板
        let str2 = `<div>
                  <h1>${title}</h1>
                  <p>${content}</p>
                  </div>`;
        console.log(str2)
    </script>
</html>

相关文章
|
6月前
|
JavaScript 前端开发
ES6的模板字符串使用
ES6的模板字符串使用
68 0
|
6月前
|
JavaScript 前端开发
ES6之模板字符串及字符串新增方法
ES6之模板字符串及字符串新增方法
|
3月前
|
JavaScript 前端开发
es6-模版字符串
【8月更文挑战第19天】
34 1
|
8天前
|
JavaScript 前端开发
模板字符串中怎样使用字符串模板字面量?
通过以上这些方式,可以充分发挥模板字符串和字符串模板字面量的强大功能,更灵活、高效地处理字符串操作,提高代码的可读性和可维护性。
16 2
|
8天前
|
SQL JavaScript 前端开发
模板字符串
模板字符串的这些特性使得 JavaScript 中的字符串处理更加方便、灵活和强大,提高了代码的可读性和可维护性,在各种 JavaScript 应用场景中都得到了广泛的应用。
14 2
|
3月前
|
JavaScript 前端开发
什么是模板字符串?
什么是模板字符串?
80 0
|
6月前
|
JavaScript 前端开发 索引
ES6学习之字符串
ES6学习之字符串
ES6模板字符串的基本使用
ES6模板字符串的基本使用
|
6月前
|
JavaScript 前端开发
ES6 什么是模板字符串?
ES6 什么是模板字符串?
|
11月前
|
JavaScript 前端开发
ES6学习(四)—字符串的新增方法
ES6学习(四)—字符串的新增方法