【JavaScript】JavaScript 变量 ⑥ ( JavaScript 数据类型 - String 字符串类型 | 字符串长度 | 加号运算符拼接字符串 | 模板字符串拼接字符串 )

韩曙亮

发布于 2024-03-12 12:44:22

7550

文章被收录于专栏：韩曙亮的移动开发专栏韩曙亮的移动开发专栏

一、 JavaScript 数据类型 - String 字符串类型

1、字符串长度

在 JavaScript 中 , String 字符串数据类型的 " 长度 " , 就是组成字符串的 " 字符个数 " , 可以通过访问字符串的 length 属性 , 获取字符串长度 ;

代码示例 :

        // 获取字符串类型变量的长度
        let str = "Hello World";
        // 输出 : 11
        console.log(str.length);

上述代码示例中 , 字符串 “Hello World” 包含11个字符 , 包括空格 , 打印字符串长度 str.length 的值是 11 ;

完整代码示例 :

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

<head>
    <meta charset="UTF-8">
    <!-- 设置 meta 视口标签 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JavaScript</title>
    <style></style>
    <script>
        // String 字符串类型

        // 获取字符串类型变量的长度
        let str = "Hello World";
        // 输出 : 11
        console.log(str.length);
    </script>
</head>

<body>
</body>

</html>

展示效果 :

2、字符串拼接

在 JavaScript 中 , " 字符串拼接 " 指的是将多个字符串组合成一个新的字符串的操作 ;

这可以通过使用

加号运算符 +
模板字符串 $

两种方式来实现 " 字符串拼接 " ;

注意 : 拼接后的字符串 , 是新的字符串 , 与原来的字符串没有任何关系 ;

只要有字符串与其它类型数据相加 , 最终的结果就是字符串 ;

使用加号运算符拼接字符串

下面的示例中 , 使用加号运算符 + 拼接字符串 ;

下面的字符串中是 2 个字符串相加 ,

        // 使用 加好运算符 拼接字符串
        // 只要有 字符串 与 其它类型数据相加 
        // 最终的结果就是 字符串
        let str1 = "Hello ";
        let str2 = 9527;
        let str3 = str1 + str2;
        console.log(str3); // 输出 "Hello 9527"

完整代码示例 :

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

<head>
    <meta charset="UTF-8">
    <!-- 设置 meta 视口标签 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JavaScript</title>
    <style></style>
    <script>
        // String 字符串类型

        // 使用 加好运算符 拼接字符串
        // 只要有 字符串 与 其它类型数据相加 
        // 最终的结果就是 字符串
        let str1 = "Hello ";
        let str2 = 9527;
        let str3 = str1 + str2;
        console.log(str3); // 输出 "Hello 9527"
    </script>
</head>

<body>
</body>

</html>

展示效果 :

使用模板字符串拼接字符串

模板字符串就是使用 ${expression} 语法嵌入表达式拼接字符串 , 这种拼接方式更加直观 ;

在 ${expression} 表达式中 , 可以直接使用变量 / 表达式 / 函数调用替代 expression 内容 ;

let name = "Tom";  
let hello = `Hello ${name}!`;  
console.log(hello); // 输出 "Hello Tom!"

完整代码示例 :

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

<head>
    <meta charset="UTF-8">
    <!-- 设置 meta 视口标签 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JavaScript</title>
    <style></style>
    <script>
        // String 字符串类型

        // 使用 模版字符串 拼接字符串
        let name = "Tom";
        let hello = `Hello ${name}!`;
        console.log(hello); // 输出 "Hello Tom!"
    </script>
</head>

<body>
</body>

</html>

展示效果 :

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2024-03-11，如有侵权请联系 cloudcommunity@tencent.com 删除

字符串