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>

相关文章
|
1月前
|
JavaScript 前端开发
ES6的模板字符串使用
ES6的模板字符串使用
23 0
|
1月前
模板字符串
模板字符串
13 1
|
1月前
|
JavaScript 前端开发
ES6之模板字符串及字符串新增方法
ES6之模板字符串及字符串新增方法
|
1月前
|
JavaScript 前端开发 索引
ES6学习之字符串
ES6学习之字符串
|
1月前
|
SQL JavaScript
js开发:请解释什么是ES6的模板字符串(template string),并给出一个示例。
ES6的模板字符串以反引号包围,支持变量和表达式插入以及多行书写。例如,插入变量值`Hello, ${name}!`,计算表达式`${num1 + num2}`,以及创建多行字符串。模板字符串保留原始空格和缩进,简化了字符串拼接,提高了代码可读性。
22 6
ES6模板字符串的基本使用
ES6模板字符串的基本使用
|
1月前
|
JavaScript 前端开发
ES6 什么是模板字符串?
ES6 什么是模板字符串?
|
9月前
ES6: 模版字符串
ES6: 模版字符串
25 0
|
10月前
ES6模板字符串是什么,有什么优点
ES6模板字符串是什么,有什么优点
58 0
|
JavaScript 前端开发
一分钟让你学会模板字符串
一分钟让你学会模板字符串
98 0