当前位置：首页 > news >正文

JavaScript字符串类型详解

news 来源：原创 2025/7/4 3:54:14

一、创建字符串

1. 字面量方式

2. 使用 String 构造函数

二、字符串的不可变性

三、字符串的长度与索引

四、字符串的拼接

1. 使用加号 (+)

2. 使用模板字符串（ES6）

五、字符串的常用方法

1. 获取子串

substring(start, end)

slice(start, end)

substr(start, length)

2. 查找子串

indexOf(substring)

lastIndexOf(substring)

3. 替换子串

replace()

4. 分割字符串

split(separator)

5. 字符串去空白

trim()

6. 字符串大小写转换

toLowerCase() 和 toUpperCase()

7. 字符串模板标签（ES6）

六、总结

JavaScript 中的字符串（String）是一种用于表示文本的数据类型。字符串是不可变的，这意味着一旦创建，其内容不能被改变，不过可以通过创建新的字符串来达到改变内容的效果。

下面是对 JavaScript 字符串类型的详细解释：

一、创建字符串

1. 字面量方式

使用单引号 (') 或双引号 (") 都可以创建字符串。

 let str1 = 'Hello, JavaScript!';let str2 = "Hello, World!";

如果字符串中包含了单引号或双引号，可以使用转义字符 \ 来避免冲突。

 let quote = 'It\'s a sunny day!';let message = "He said, \"Hello!\"";

2. 使用 `String` 构造函数

 let str3 = new String("Hello!");

使用 new String() 创建的是一个对象，而不是原始字符串。通常情况下推荐使用字面量方式创建字符串，因为这样更简洁且性能更好。

二、字符串的不可变性

JavaScript中的字符串是不可变的，这意味着一旦创建了一个字符串，就不能直接修改其内容。所有字符串方法（如 replace、toUpperCase）都会返回新字符串，原字符串不变。

 var originalStr = "Hello";var newStr = originalStr + " World"; // 输出："Hello World"

三、字符串的长度与索引

每个字符串都有一个 length 属性，表示字符串中字符的数量。字符串中的每个字符都有一个对应的索引值，从0开始递增，字符串的索引可以用于访问特定位置的字符。

 var str = "Hello";console.log(str.length); // 输出：5console.log(str[0]);     // 输出："H"

四、字符串的拼接

1. 使用加号 (`+`)

 let greeting = "Hello, " + "World!";console.log(greeting); // 输出: Hello, World!

2. 使用模板字符串（ES6）

模板字符串使用反引号 (``) 包裹，并允许在字符串中嵌入变量或表达式。

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

五、字符串的常用方法

JavaScript提供了丰富的字符串方法，用于处理和操作字符串。

以下是一些常用方法：

1. 获取子串

`substring(start, end)`

 let text = "Hello, World!";let subStr1 = text.substring(7, 12); // 从索引7到索引12（不包括12）console.log(subStr1); // 输出: World

`slice(start, end)`

 let text = "Hello, World!";let subStr2 = text.slice(7, 12); // 和 substring() 类似，但允许负索引console.log(subStr2); // 输出: World

`substr(start, length)`

 let text = "Hello, World!";let subStr3 = text.substr(7, 5); // 从索引7开始，截取5个字符console.log(subStr3); // 输出: World!

2. 查找子串

`indexOf(substring)`

 let text = "Hello, World!";let index = text.indexOf("World");console.log(index); // 输出: 7

`lastIndexOf(substring)`

 let text = "Hello, World!";let lastIndex = text.lastIndexOf("o");console.log(lastIndex); // 输出: 8（最后一个'o'的位置）

3. 替换子串

`replace()`

 let text = "Hello, World!";let newText = text.replace("World", "JavaScript");console.log(newText); // 输出: Hello, JavaScript!

replace() 只替换第一个匹配的子字符串，要替换所有匹配项，可以使用正则表达式和全局标志 (g)。

 let text = "Hello, World!";let newTextAll = text.replace(/World/g, "JavaScript");console.log(newTextAll); // 输出: Hello, JavaScript!（在这个例子中，只有一个匹配项）

4. 分割字符串

`split(separator)`

 let text = "Hello, World!";let words = text.split(", ");console.log(words); // 输出: ["Hello", "World!"]

5. 字符串去空白

`trim()`

 let spacedText = "   Hello, World!   ";let trimmedText = spacedText.trim();console.log(trimmedText); // 输出: "Hello, World!"

trim() 去除字符串两端的空白字符。类似的方法还有 trimStart() 和 trimEnd()，分别去除字符串开始和结束处的空白字符。

6. 字符串大小写转换

`toLowerCase()` 和 `toUpperCase()`

 let text = "Hello, World!";let lowerText = text.toLowerCase();let upperText = text.toUpperCase();console.log(lowerText); // 输出: "hello, world!"console.log(upperText); // 输出: "HELLO, WORLD!"

7. 字符串模板标签（ES6）

标签模板允许用户创建自定义的模板字符串处理函数。

 function tag(strings, ...values) {console.log(strings); // 输出: ["Hello, ", " world!"]console.log(values);  // 输出: ["Tom"]return "Tagged template literal";}let message = tag`Hello, ${"Tom"} world!`;console.log(message); // 输出: Tagged template literal

六、总结

JavaScript 提供了丰富的字符串操作方法，结合 ES6+ 特性（如模板字符串、padStart）可高效处理文本。

关键点：

字符串不可变，操作返回新字符串。
熟悉常用方法（如 split、replace、trim）。
模板字符串简化复杂拼接。
注意编码问题（如 Unicode 字符长度）。

JavaScript字符串类型详解

目录一、创建字符串 1. 字面量方式 2. 使用 String 构造函数二、字符串的不可变性三、字符串的长度与索引四、字符串的拼接 1. 使用加号 () 2. 使用模板字符串（ES6） 五、字符串的常用方法 1. 获取子串 substring(start, end) slice(start…...

编程日记 2025/7/4 3:54:14

Hdoop之MapReduce的原理

简单版本 AppMaster: 整个Job任务的核心协调工具 MapTask: 主要用于Map任务的执行 ReduceTask: 主要用于Reduce任务的执行一个任务提交Job --> AppMaster(项目经理)--> 根据切片的数量统计出需要多少个MapTask任务 --> 向ResourceManager(Yarn平台的老大)索要资源 --…...

编程日记 2025/7/3 5:27:16

数据仓库和商务智能：洞察数据，驱动决策

在数据管理的众多领域中，数据仓库和商务智能（BI）是将数据转化为洞察力、支持决策制定的关键环节。它们通过整合、存储和分析数据，帮助组织更好地理解业务运营，预测市场趋势，从而制定出更明智的战略。今天&a…...

编程日记 2025/7/3 16:59:29

可视化工作流编排参数配置完整方案设计文档

一、背景及需求分析 1. 背景在复杂的工作流程中，后续程序需要动态构造输入参数，这些参数源自多个前序程序的 JSON 数据输出。为了增强系统的灵活性和可扩展性，配置文件需要支持以下功能： 灵活映射前序程序的 JSON 数据。…...

编程日记 2025/7/2 18:02:28

文章目录简介sysfs接口sysfs和procfs参考本文拟对Linux sysfs虚拟文件系统进行简单的介绍和原理分析简介测试环境：Linux dev-PC 5.18.17-amd64-desktop-hwe #20.01.00.10 SMP PREEMPT_DYNAMIC Thu Jun 15 16:17:50 CST 2023 x86_64 GNU/Linux sysfs虚拟文件系统…...

编程日记 2025/7/4 3:19:39

C++ 设计模式 - 访问者模式

一：概述访问者模式将作用于对象层次结构的操作封装为一个对象，并使其能够在不修改对象层次结构的情况下定义新的操作。《设计模式：可复用面向对象软件的基础》一书中的访问者模式因两个原因而具有传奇色彩：一是因为它的复杂性&a…...

编程日记 2025/6/28 11:51:45

微软编程之C#如何学习，C#学习路线：从入门到精通

引言 C# 是一种由微软开发的面向对象编程语言，广泛应用于 Windows 应用程序开发、游戏开发（Unity）、Web 开发（ASP.NET）等领域。对于初学者来说，掌握 C# 不仅能够打开编程世界的大门，还能为未来…...

编程日记 2025/7/4 1:28:56

PromptSource官方文档翻译

目录核心概念解析提示模板（Prompt Template） P3数据集安装指南基础安装（仅使用提示） 开发环境安装（需创建提示） API使用详解基本用法子数据集处理批量操作提示创建流程 Web界面操作手…...

编程日记 2025/7/2 20:45:13

深入理解QT的View-Model-Delegate机制和用法

文章目录 Model-View-Delegate机制Model(数据模型)设置模型属性访问元素操作元素数据排序封装好的模型View(视图)显示数据数据选择Delegate(代理)数据选择易用封装类QListWidgetQTreeWidgetQTableWidget元素拖拽代理模型参考示例Model-View-Delegate机制 Qt的View/Model/Deleg…...

编程日记 2025/7/2 4:38:26

【JavaScript】JavaScript 运行原理

执行上下文 JavaScript引擎会在执行代码之前，会在堆内存中创建一个全局对像：Global Object(GO) 该对象所有的作用域(scope)都可以访问，在浏览器中这个对象就是window；里面会包含Date、Array、StringNumber、setTimeout、setInte…...

编程日记 2025/7/4 2:52:39

力扣hot100刷题第一天

哈希 1. 两数之和题目给定一个整数数组 nums 和一个整数目标值 target，请你在该数组中找出和为目标值 target 的那两个整数，并返回它们的数组下标。你可以假设每种输入只会对应一个答案，并且你不能使用两次相同的元素。你可以按任意…...

编程日记 2025/6/28 13:14:28

数据结构-find（）-判断字符串s1中是否包含字符串s2

find()库函数 #include <iostream> using namespace std;bool check(string s1,string s2){int n s1.size();int m s2.size();if(n0||m0 || n<m){return false;}if(s1.find(s2) ! string::npos){return true;}else{return false;} }int main () {string a "…...

编程日记 2025/7/1 23:11:05

寒假2.7

题解 web：[HCTF 2018]WarmUp 打开是张表情包看一下源代码访问source.php，得到完整代码代码审计 <?phphighlight_file(__FILE__);class emmm{public static function checkFile(&$page){$whitelist ["source">"source.p…...

编程日记 2025/7/4 3:39:09

【韩顺平linux】部分上课笔记整理

整理一下一些韩顺平老师上课时候的笔记课程：【小白入门通俗易懂】韩顺平一周学会Linux linux环境：使用阿里云服务器笔记参考 ： [学习笔记]2021韩顺平一周学会Linux 一、自定义函数基本语法应用实例： 计算两个参数的和…...

编程日记 2025/7/4 2:50:11

Linux proc虚拟文件系统

文章目录简介proc常用节点pid节点procfs接口参考简介测试环境：Linux dev-PC 5.18.17-amd64-desktop-hwe #20.01.00.10 SMP PREEMPT_DYNAMIC Thu Jun 15 16:17:50 CST 2023 x86_64 GNU/Linux proc虚拟文件系统是linux内核提供的一种让用户和内核内部数据结构进行交…...

编程日记 2025/7/4 3:08:11

IDEA中常见问题汇总

🍓 简介：java系列技术分享(👉持续更新中…🔥) 🍓 初衷:一起学习、一起进步、坚持不懈 🍓 如果文章内容有误与您的想法不一致,欢迎大家在评论区指正🙏 🍓 希望这篇文章对你有所帮助,欢…...

编程日记 2025/7/4 3:07:35

Spring Security 学习大纲

Spring Security 系统学习大纲一、基础入门 Spring Security 概述安全框架的核心功能（认证、授权、攻击防护）核心组件：SecurityFilterChain, UserDetailsService, AuthenticationProvider, AccessDecisionManager与 Servlet 容器的集成原理…...

编程日记 2025/6/28 11:49:01

本地部署模型全攻略阶段二_3---Kiln AI

Kiln AI && Ollma && DeepSeek Kil AI：简单介绍与入门教程Kiln AI简介核心功能优势与特点二、Kiln AI安装步骤下载安装创建项目和任务使用界面Fine Tuning三、资源与支持Kil AI：简单介绍与入门教程 Kiln AI简介简述Kiln AI是什么 Kiln AI是一款开源的AI开发…...

编程日记 2025/6/29 13:13:07

从零开始：使用Jenkins实现高效自动化部署

在这篇文章中我们将深入探讨如何通过Jenkins构建高效的自动化部署流水线，帮助团队实现从代码提交到生产环境部署的全流程自动化。无论你是Jenkins新手还是有一定经验的开发者，这篇文章都会为你提供实用的技巧和最佳实践，助你在项目部署中走得…...

编程日记 2025/7/4 2:46:36

机器学习 - 线性回归（最大后验估计）

最大似然估计的一个缺点是当训练数据比较少时会发生过拟合，估计的参数可能不准确.为了避免过拟合，我们可以给参数加上一些先验知识. 一、先从最大似然估计的一个缺点入手最大似然估计（MLE）在处理小样本数据时，容易发…...

编程日记 2025/7/4 2:35:21

Web前端开发--HTML

HTML快速入门 1.新建文本文件，后缀名改为.html 2.编写 HTML结构标签 3.在<body>中填写内容 HTML结构标签特点 1.HTML标签中不区分大小写 2.HTML标签属性值中可以使用单引号也可使用双引号 3.HTML语法结构比较松散（但在编写时要严格一点&…...

编程日记 2025/7/4 2:31:47

Linux | 系统调用

文章目录 Linux | 系统调用open 系统调用功能头文件和函数原型参数解释返回值示例代码其他常用系统调用read 系统调用write 系统调用close 系统调用lseek 系统调用stat 系统调用 Linux | 系统调用前言：在Linux系统中，系统调用是用户空间程序与内核进行…...

编程日记 2025/7/4 2:31:48

用easyExcel如何实现？

要使提供的 ExcelModelListener 类来解析 Excel 文件并实现批量存储数据库的功能，需要结合 EasyExcel 库来读取 Excel 数据。具体来说，可以使用 EasyExcel.read() 方法来读取 Excel 文件，并指定 ExcelModelListener 作为事件监听器。下面是…...

编程日记 2025/7/4 3:08:08

ASP.NET Core SignalR身份验证

在需要登录才能访问的集线器类上或者方法上添加[Authorize]。也支持角色等设置，可以设置到Hub或者方法上。配置好User、Role、MyDbContext、JWTSettings、IdentityHelper Program.cs using SignaIR的基本使用; using Scalar.AspNetCore; using Identity框架; us…...

编程日记 2025/7/4 2:49:26

查询语句来提取 detail 字段中包含 xxx 的 URL 里的 commodity/ 后面的数字串

您可以使用以下 SQL 查询语句来提取 detail 字段中包含 oss.kxlist.com 的 URL 里的 commodity/ 后面的数字串： <p><img style"max-width:100%;" src"https://oss.kxlist.com//8a989a0c55e4a7900155e7fd7971000b/commodity/20170925/20170…...

编程日记 2025/7/4 2:56:09

linux本地部署deepseek

目录安装ollama安装open-webui网页客户端界面本地安装open-webui直接安装在裸机上安装在docker中外部服务器安装open-webui，并链接本地的ollama服务直接安装在外部服务器裸机上配置systemd启动open-webui 安装在docker中最后更新时间2024-05-24 安装ollama olla…...

编程日记 2025/7/1 0:00:18

ESP32_H2（IDF）学习系列-蓝牙基础学习（上）

一、简介参考：[乐鑫-蓝牙] Bluetooth LE 的分层架构 Bluetooth LE 协议定义了三层软件结构，自上而下分别是应用层 (Application Layer) 应用层（Application Layer） 主机层 (Host Layer) 控制器层 (Controller Layer) 应用…...

编程日记 2025/7/4 2:45:02

防御综合实验

需求一配置vlan [SW2]int g 0/0/2 [SW2-GigabitEthernet0/0/2]port link-type access [SW2-GigabitEthernet0/0/2]port default vlan 10 [SW2-GigabitEthernet0/0/2]int g0/0/3 [SW2-GigabitEthernet0/0/3]port link-type access [SW2-GigabitEthernet0/0/3]port default vl…...

编程日记 2025/6/28 11:59:58

一、创建字符串

1. 字面量方式

2. 使用 String 构造函数

二、字符串的不可变性

三、字符串的长度与索引

四、字符串的拼接

1. 使用加号 (+)

2. 使用模板字符串（ES6）

五、字符串的常用方法

1. 获取子串

substring(start, end)

slice(start, end)

substr(start, length)

2. 查找子串

indexOf(substring)

lastIndexOf(substring)

3. 替换子串

replace()

4. 分割字符串

split(separator)

5. 字符串去空白

trim()

6. 字符串大小写转换

toLowerCase() 和 toUpperCase()

7. 字符串模板标签（ES6）

六、总结

相关文章：

2. 使用 `String` 构造函数

1. 使用加号 (`+`)

`substring(start, end)`

`slice(start, end)`

`substr(start, length)`

`indexOf(substring)`

`lastIndexOf(substring)`

`replace()`

`split(separator)`

`trim()`

`toLowerCase()` 和 `toUpperCase()`