JavaScript字符串

🕗 发布于 2024-11-27 02:12 javascript 开发语言 ecmascript

请添加图片描述
这张图片主要介绍了JavaScript中的字符串类型（string）。

字符串

1. 字符串的定义

在JavaScript中，通过单引号（'）、双引号（"）或反引号（`）包裹的数据都叫字符串。单引号和双引号没有本质上的区别，推荐使用单引号。

示例代码如下：

let uname = '小明'; // 使用单引号
let gender = "男"; // 使用双引号
let goods = `小米`; // 使用反引号

2. 特殊情况

即使看上去是数字，但如果用引号包裹了，那就是字符串。例如：

let tel = '1368113456'; // 看上去是数字，但是引号包裹了就是字符串

空字符串是指两个引号中间没有任何字符。例如：
```
let str = ''; // 这种情况叫空字符串
```

3. 注意事项

引号的使用规则

无论单引号或是双引号必须成对使用。例如：

let wrong1 = '这是一个错误的单引号;
let correct1 = '这是正确的单引号';

单引号/双引号可以互相嵌套，但是不以自己嵌套自己（口诀：外双内单，或者外单内双）。例如：
```
let correct2 = "这是'单引号'在双引号内";
let correct3 = '这是"双引号"在单引号内';
```

错误的嵌套示例：

let wrong2 = '这是一个错误的'单引号'嵌套';
let wrong3 = "这是一个错误的"双引号"嵌套";

转义符

必要时可以使用转义符（\）输出单引号或双引号。例如：

let correct4 = '这是一个包含单引号的字符串： \' ';
let correct5 = "这是一个包含双引号的字符串： \" ";

字符串拼接

在JavaScript中，字符串拼接是将两个或多个字符串连接在一起形成一个新字符串的操作。以下是几种常见的字符串拼接方法：

1. 使用加号（+）运算符

这是最常见的字符串拼接方法。当使用加号连接两个字符串时，JavaScript会自动将它们拼接在一起。

let str1 = "Hello";
let str2 = "World";
let result = str1 + " " + str2;
console.log(result); // "Hello World"

如果要将字符串与其他数据类型（如数字）拼接，JavaScript会自动将非字符串类型转换为字符串类型。

let num = 42;
let str = "The answer is: " + num;
console.log(str); // "The answer is: 42"

2. 使用模板字面量（Template Literals）

ES6引入了模板字面量，使用反引号（`）来定义字符串，可以在字符串中嵌入表达式，使用${}来包裹表达式。

let name = "Alice";
let age = 30;
let message = `My name is ${name} and I am ${age} years old.`;
console.log(message); // "My name is Alice and I am 30 years old."

3. 使用concat()方法

字符串对象有一个concat()方法，可以用于拼接字符串。它可以接受多个参数，每个参数都会被拼接到原字符串的末尾。

let str3 = "Good";
let str4 = "Morning";
let result2 = str3.concat(" ", str4);
console.log(result2); // "Good Morning"

4. 使用数组的join()方法（间接方法）

可以将字符串放入数组中，然后使用数组的join()方法将它们拼接在一起。

let parts = ["I", "love", "JavaScript"];
let joinedStr = parts.join(" ");
console.log(joinedStr); // "I love JavaScript"

在JavaScript中，prompt()是一个内置函数，用于弹出一个对话框，提示用户输入文本。它的基本语法如下：

prompt([message[, default]])

message：可选参数，是一个字符串，用于在对话框中显示提示信息，告诉用户需要输入什么内容。
default：可选参数，是一个字符串，用于设置输入框中的默认值。

prompt()函数的返回值是用户输入的字符串，如果用户点击了“取消”按钮，则返回null。

prompt

以下是一些使用prompt()函数的示例：

示例一：简单使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <script>
        let name = prompt("请输入你的名字：");
        if (name!== null) {
            alert("你输入的名字是：" + name);
        } else {
            alert("你取消了输入。");
        }
    </script>
</body>
</html>

在这个示例中，prompt()函数弹出一个对话框，要求用户输入名字。如果用户输入了名字，name变量将保存用户输入的字符串，然后通过alert()函数显示用户输入的名字；如果用户点击了“取消”按钮，name变量将为null，则显示用户取消了输入。

示例二：设置默认值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <script>
        let age = prompt("请输入你的年龄：", "18");
        if (age!== null) {
            alert("你输入的年龄是：" + age);
        } else {
            alert("你取消了输入。");
        }
    </script>
</body>
</html>

在这个示例中，prompt()函数的第二个参数设置了输入框中的默认值为"18"。如果用户不输入任何内容而直接点击“确定”按钮，age变量将为"18"。

prompt()函数在获取用户简单输入时非常有用，但在实际开发中，可能会使用HTML表单和其他交互方式来获取用户输入，以提供更好的用户体验和数据验证。

模板字符串

模板字符串（Template Strings）

定义
- 模板字符串是ES6引入的一种新的字符串表示方法，使用反引号（`）来定义字符串，而不是单引号（'）或双引号（"）。
- 例如：
```
let str = `This is a template string.`;
```

特性

多行字符串
- 模板字符串可以轻松地表示多行字符串，不需要使用转义字符（\n）来换行。
- 例如：
```
let multiLineStr = `
This is a
multi - line
string.
`;
```

字符串插值（String Interpolation）

模板字符串允许在字符串中嵌入表达式，使用${}来包裹表达式。这使得在构建字符串时可以动态地插入变量或执行简单的运算。

例如：

let name = "Alice";
let age = 30;
let message = `My name is ${name} and I am ${age} years old.`;
console.log(message); // "My name is Alice and I am 30 years old."

还可以在${}中嵌入函数调用或其他表达式：

let num1 = 5;
let num2 = 10;
let resultStr = `The sum of ${num1} and ${num2} is ${num1 + num2}.`;
console.log(resultStr); // "The sum of 5 and 10 is 15."

标签模板（Tagged Templates）

模板字符串可以被标记（Tagged），这意味着可以在模板字符串前添加一个函数来处理该字符串。

例如：

function tagFunc(strings,...values) {
  let result = "";
  for (let i = 0; i < strings.length; i++) {
    result += strings[i];
    if (i < values.length) {
      result += values[i];
    }
  }
  return result;
}
let name = "Bob";
let age = 25;
let taggedStr = tagFunc`My name is ${name} and I am ${age} years old.`;
console.log(taggedStr); // "My name is Bob and I am 25 years old."

标签函数（tagFunc）接收两个参数：
- strings：一个包含所有普通字符串部分（即没有被${}包裹的部分）的数组。
- values：一个包含所有表达式计算结果的数组。

模板字符串在现代JavaScript开发中非常常用，尤其是在构建动态内容时，它提供了一种简洁和灵活的方式来处理字符串。

未定义数据类型（undefined）

概念
- 在JavaScript中，undefined是一种原始数据类型。当一个变量被声明但没有被赋值时，它的默认值就是undefined。
- 例如：
```
let myVariable;
console.log(myVariable); // 输出：undefined
```
常见情况
- 函数没有返回值
  - 如果一个函数没有显式地使用return语句返回一个值，那么该函数默认返回undefined。
  - 例如：
```
function myFunction() {
  // 没有return语句
}
let result = myFunction();
console.log(result); // 输出：undefined
```
- 访问对象不存在的属性
  - 当试图访问一个对象中不存在的属性时，会得到undefined。
  - 例如：
```
let myObject = {
  name: "John"
};
console.log(myObject.age); // 输出：undefined
```
与null的区别
- undefined表示变量声明了但未赋值，而null表示一个空值，通常是开发者有意为之，用来表示“没有对象”或“空对象指针”。
- 例如：
```
let variable1;
let variable2 = null;
console.log(variable1); // 输出：undefined
console.log(variable2); // 输出：null
```

布尔数据类型（boolean）

概念
- 布尔数据类型在JavaScript中只有两个值：true和false。它通常用于条件判断和逻辑运算。
- 例如：
```
let isTrue = true;
let isFalse = false;
```
类型转换
- 转换为布尔值
  - JavaScript中的许多值都可以被隐式或显式地转换为布尔值。以下是一些常见的转换规则：
    - 真值（转换为true）
      - 所有非空字符串，例如"Hello"。
      - 所有非零数字，例如5。
      - 所有非空对象，例如{name: "Alice"}。
    - 假值（转换为false）
      - 空字符串""。
      - 数字0。
      - null。
      - undefined。
      - false本身。
  - 可以使用Boolean()函数显式地将一个值转换为布尔值。
  - 例如：
```
console.log(Boolean("")); // 输出：false
console.log(Boolean(0)); // 输出：false
console.log(Boolean(null)); // 输出：false
console.log(Boolean(undefined)); // 输出：false
console.log(Boolean(false)); // 输出：false
console.log(Boolean("Hello")); // 输出：true
console.log(Boolean(5)); // 输出：true
console.log(Boolean({name: "Alice"})); // 输出：true
```

布尔运算

布尔数据类型常用于逻辑运算，如&&（与）、||（或）、!（非）。

例如：

let a = 5;
let b = 10;
console.log(a > 0 && b > 0); // 输出：true（因为a > 0和b > 0都为真）
console.log(a > 10 || b > 0); // 输出：true（因为b > 0为真）
console.log(!(a > 10)); // 输出：true（因为a > 10为假，取非后为真）

原文地址：https://blog.csdn.net/qq_45755863/article/details/144040883

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

上一篇：docker离线安装linux部分问题整理
下一篇：Dockerfile构建报错【ERROR: failed to solve: process】的解决办法

【CSP CCF记录】201903-2第16次认证二十四点
字符转数字；字符转运算符；erase的用法。
阅读更多2024-11-27
Web 表单开发全解析：从基础到高级掌握 HTML 表单设计
在现代 Web 开发中，表单是用户与后端服务交互的重要桥梁。无论是用户登录、注册、搜索，还是提交反馈，表单都无处不在。在本文中，我们将从基础入手，全面解析表单的核心知识点，并通过示例带你轻松掌握表单
阅读更多2024-11-27
【简单好抄保姆级教学】javascript调用本地exe程序（谷歌，edge，百度，主流浏览器都可以使用....）
在本地创建一个txt文件依次输入，指明了所使用的注册表编辑器版本。这是必需的，以确保脚本能够被正确解析和执行。，用于处理文件关联、协议和其他类型的信息。这里的@符号表示command子项的默认（未命名
阅读更多2024-11-27
Spring Boot 与 Spring Cloud Alibaba 版本兼容对照
版本选择要点Spring Boot 3.x 与 Spring Cloud Alibaba 2022.0.xSpring Boot 3.x 基于 Jakarta EE，javax.* 更换为 jakar
阅读更多2024-11-27
分类算法——基于heart数据集实现
【代码】分类算法——基于heart数据集实现。
阅读更多2024-11-27
【Linux】vim的使用
进入vimvim是一款编辑器。自带，使用成本较高。我们创建一个普通文件，然后vim code.c，进入vim。想要退出vim，怎么做？（因为当前我们不知道在什么模式下），我们先按下键盘最左上角的Esc
阅读更多2024-11-27
计算机网络的类型
个人区域网是一种短距离无线通信网络，用于连接个人设备，如智能手机、智能手表、无线耳机等。
阅读更多2024-11-27
40分钟学 Go 语言高并发：Pipeline模式（一）
让我们继续完成高级Pipeline的实现。
阅读更多2024-11-27
Spring Boot教程之十：使用 Spring Boot 实现从数据库动态下拉列表
使用 Spring Boot 实现从数据库动态下拉列表动态下拉列表（或依赖下拉列表）的概念令人兴奋，但编写起来却颇具挑战性。动态下拉列表意味着一个下拉列表中的值依赖于前一个下拉列表中选择的值。一个简单
阅读更多2024-11-27
「实战应用」如何用图表控件LightningChart .NET实现散点图？（一）
本文将为大家介绍如何用图表控件LightningChart .NET实现散点图，欢迎联系我们获取新产品试用！
阅读更多2024-11-27