文章目录
- 一、 JavaScript 数据类型 - String 字符串类型
- 1、字符串长度
- 2、字符串拼接
- 使用 加号运算符 拼接字符串
- 使用 模板字符串 拼接字符串
一、 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>展示效果 :
