模板字符串（vue.js笔记）_vue模板字符串-CSDN博客

本文链接：https://blog.csdn.net/dogeggcrazy/article/details/128052042

1..什么是模板字符串？

模板字符串：是允许嵌入表达式的字符串（可以使用多行字符串和字符串插值功能)

2.语法：

模板字符串用``号来放入

let str = `这是一个模板字符串`;

实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        //定义变量
        let name = `初号机`;
        let weapon = `朗基努斯之枪`;
 
        //字符串嵌入变量
        document.write(`${name}的武器是${weapon}`)
    </script>
</body>
</html>

效果如下：

2.多行字符串

在新行中插入的任何字符都是模板字符串中的一部分，使用普通字符串，你可以通过以下的方式获得多行字符串：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        //1.字符串相加
        //优点:易理解，简单，可靠。
        //缺点:并不是真正意义上的多行字符串;大量的+号看上去像满天星
        let str1 = "Im " +
        "studying";
        console.log(str1); //Im studying
 
        //2.使用反斜线(续行符，并非一种常见形式)
        //优点:简单，高效。
        //缺点:每一行的\后必须不可以有空格，否则之间脚本错误。同样不是真正意义上的多行字符串。
        let str2 = "I am \
        student";
        console.log(str2);  //I am          student
 
    </script>
</body>
</html>

3.字符串和数组相互转换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        //字符串转化为数组 split
        let A = 'abc';
        let B = A.split('');
        console.log(A);//abc
        console.log(B);//['a','b'.'c']
 
        //数组转化为字符串 join
        let a = [1,2,3,4];
        let b = a.join('');
        console.log(a);
        console.log(b);
        console.log(typeof(b));
    </script>
</body>
</html>

4.字符串声明与方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        //1.声明字符串
        let str1 = "江西软件职业技术";
        let str2 = "江西软件职业技术";
        let str3 = `江西软件职业技术`;
 
        //2.判断一个字符串在不在某个字符串里面
         let index1 = str1.indexOf('江西');
         console.log(index1);
 
         //3.截取字符串（第一个参数：从那个下标开始截取；第二个参数：截取的长度）
         let str4 = str1.substr(2,3)
         console.log(str4);
 
         //4.修改字符串（第一个参数：要修改的字符串；第二个参数：修改后的字符串）
         let str5 = str.replace("软件","互联网")
         console.log(str5);
 
         //5.分割字符串
         let str6 = "你好世界"  
         //这个函数返回的一定是一个数组
         let array = str6.split(',')
         // &为分隔符，找到分隔符后，将其从字符串删除，并将子字符串的数组返回。 
         // 如果没有找到或省略了分隔符，则该数组包含了一个由整个字符串组成的元素。 
         // 如果分隔符为空字符串，则将str转换为字符数组 
         console.log(array);
    </script>
</body>
</html>