JavaScript字符串基础与常用操作方法详解
本文详细介绍JavaScript中字符串的定义方式,包括单双引号的使用及特殊字符的转义处理。重点讲解ES6新增的多行字符串与模板字符串语法,并系统梳理获取长度、大小写转换、查找子串及截取子串等核心字符串操作方法,帮助开发者高效处理文本数据。
JavaScript字符串定义与转义
在JavaScript中,字符串是由单引号(')或双引号(")包裹的字符序列。
当字符串内容本身包含单引号时,可以使用双引号将其包裹,例如 "I'm OK" 包含 I、'、m、空格、O、K 共6个字符。
若字符串内部同时存在单引号和双引号,需使用反斜杠(\)作为转义字符进行标识,例如:
'I\'m \"OK\"!';
上述代码表示的字符串内容为:I'm "OK"!
反斜杠(\)可用于转义多种字符,如 \n 代表换行,\t 代表制表符。若需表示字符 \ 本身,则需使用 \\ 进行转义。
ASCII字符可通过 \x## 形式的十六进制代码表示,例如:
'\x41'; // 完全等同于 'A'
此外,还可以使用 \u#### 格式来表示一个Unicode字符:
'\u4e2d\u6587'; // 完全等同于 '中文'
多行字符串
使用 \n 编写多行字符串较为繁琐,ES6标准引入了反引号(` ... `)来表示多行字符串:
`这是一个
多行
字符串`;
模板字符串
连接多个字符串通常使用加号(+):
ES6多行字符串与模板字符串
var name = '小明';
var age = 20;
var message = '你好, ' + name + ', 你今年' + age + '岁了!';
alert(message);
当需要连接的变量较多时,加号拼接显得繁琐。ES6引入了模板字符串,其语法与多行字符串类似,但会自动替换字符串中的变量:
var name = '小明';
var age = 20;
var message = `你好, ${name}, 你今年${age}岁了!`;
alert(message);
操作字符串
字符串的常见操作如下:
字符串常用操作方法
var s = 'Hello, world!';
s.length; // 13
获取字符串指定位置的字符可使用类似数组的下标操作,索引从0开始:
var s = 'Hello, world!';
s[0]; // 'H'
s[6]; // ' '
s[7]; // 'w'
s[12]; // '!'
s[13]; // undefined 超出范围的索引不会报错,但一律返回undefined
需注意,字符串是不可变的。对字符串索引赋值虽不报错,但不会产生任何效果。
var s = 'Test';
s[0] = 'X';
alert(s); // s仍然为'Test'
JavaScript提供了多种字符串方法,调用这些方法不会修改原字符串,而是返回一个新字符串:
toUpperCase
toUpperCase() 方法将字符串全部转换为大写:
var s = 'Hello';
s.toUpperCase(); // 返回'HELLO'
toLowerCase
toLowerCase() 方法将字符串全部转换为小写:
var s = 'Hello';
var lower = s.toLowerCase(); // 返回'hello'并赋值给变量lower
lower; // 'hello'
indexOf
indexOf()会搜索指定字符串出现的位置:
var s = 'hello, world';
s.indexOf('world'); // 返回7
s.indexOf('World'); // 没有找到指定的子串,返回-1
substring
substring()返回指定索引区间的子串:
var s = 'hello, world'
s.substring(0, 5); // 从索引0开始到5(不包括5),返回'hello'
s.substring(7); // 从索引7开始到结束,返回'world'
JS大数值转字符串出现科学计数法怎么办
2026-11-05 17:09:21
JS split切割后出现空字符串怎么过滤
2026-11-05 16:00:30
在 React 或 Vue 项目中封装使用 JS 节流防抖
2026-11-05 15:27:29
JavaScript中怎么将带小数的字符串转为整数?
2026-11-05 14:32:38
怎么用JavaScript策略模式重构电商促销计算逻辑?
2026-11-05 14:01:09
