文章目录
一、 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>展示效果 :