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

王小婷

发布于 2025-05-19 15:38:58

9500

代码可运行

文章被收录于专栏：编程微刊编程微刊

运行总次数：0

代码可运行

两个新方法

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>