4.1 字符串简介
JavaScript中的字符串是字符序列,是一种基本数据类型。 字符串可以用单引号('文本'),双引号("文本"), 或反引号(`文本`)来创建。
字符串示例:
let singleQuote = 'Hello, World!';
let doubleQuote = "Hello, World!";
let backticks = `Hello, World!`;
字符串对象上可以调用这些方法:
方法 | 描述 |
---|---|
length | 返回字符串的长度 |
charAt(index) | 返回指定位置的字符 |
toUpperCase() | 将字符串转换为大写 |
toLowerCase() | 将字符串转换为小写 |
indexOf(substring) | 返回子串的第一次出现的索引,如果未找到则返回-1 |
includes(substring) | 检查字符串是否包含指定的子串,返回true或false |
slice(start, end) | 提取字符串的一部分并返回一个新字符串 |
replace(searchValue, newValue) | 将指定子串替换为新子串 |
split(separator) | 使用指定分隔符将字符串拆分为子串数组 |
trim() | 删除字符串开头和结尾的空格 |
4.2 字符串的基本操作方法
方法使用示例
1. length属性
返回字符串的长度:
let str = 'Hello';
console.log(str.length); // 5
2. 方法 charAt(index)
返回指定位置的字符:
let str = 'Hello';
let result = str.charAt(1);
console.log(result); // 'e'
3. 方法 toUpperCase() 和 toLowerCase():
将字符串转换为大写或小写:
let str = 'Hello';
console.log(str.toUpperCase()); // 'HELLO'
console.log(str.toLowerCase()); // 'hello'
4. 方法 indexOf(substring)
返回子串的第一次出现的索引,或-1如果未找到:
let str = 'Hello, world!';
let result = str.indexOf('world');
console.log(result); // 7
5. 方法 includes(substring)
检查字符串是否包含指定的子串,返回true或false:
let str = 'Hello, world!';
let result = str.includes('world');
console.log(result); // true
6. 方法 trim()
删除字符串开头和结尾的空格:
let str = ' Hello, world! ';
console.log(str.trim()); // 'Hello, world!'
7. 方法 replace(searchValue, newValue)
将指定子串替换为新子串:
let str = 'Hello, world!';
console.log(str.replace('world', 'JavaScript')); // 'Hello, JavaScript!'
8. 方法 split(separator)
使用指定分隔符将字符串拆分为子串数组:
let str = 'Hello, world!';
let words = str.split(' ');
console.log(words); // ['Hello,', 'world!']
9. 方法 substring(start, end)
返回两个索引之间的子串:
let str = 'Hello, world!';
console.log(str.substring(0, 5)); // 'Hello'
10. 方法 substr(start, length)
返回从指定索引开始的子串,并指定长度:
let str = 'Hello, world!';
console.log(str.substr(0, 5)); // 'Hello'
11. 方法 slice(start, end)
提取字符串的一部分并返回一个新字符串:
let str = 'Hello, world!';
console.log(str.slice(0, 5)); // 'Hello'
12. 方法 startsWith(substring)
检查字符串是否以指定子串开头,返回true
或false
:
let str = 'Hello, world!';
console.log(str.startsWith('Hello')); // true
13. 方法 endsWith(substring)
检查字符串是否以指定子串结尾,返回true
或false
:
let str = 'Hello, world!';
console.log(str.endsWith('world!')); // true
14. 方法 repeat(count)
返回包含指定数量的原字符串的新字符串:
let str = 'Hello';
console.log(str.repeat(3)); // 'HelloHelloHello'
let str2 = '-';
console.log(str2.repeat(30)); // '---------------------------------------------------------------'
4.3 新一代字符串
模板字符串最近在JavaScript中被添加进来,它们提供了一种比常规字符串更方便和可读的文本处理方式。用反引号(`)括起,支持表达式插值和多行文本。
语法:
`新一代字符串`
示例:
模板字面量greeting
是用反引号创建的。
const greeting = `Hello, World!`;
console.log(greeting); // "Hello, World!"
模板字符串的主要特点:
- 表达式插值: 模板字符串允许通过
${}
插入表达式和变量到字符串中 - 多行文本: 模板字符串支持多行文本而无需使用特殊字符来换行
- 内嵌表达式: 模板字符串中可以使用任何JavaScript表达式,包括函数
来看几个模板字符串的使用例子。
表达式插值
模板字符串使将变量值和表达式结果插入到字符串中变得非常简单:
let name = "Alice";
let age = 30;
let greeting = `Hello, ${name}! You are ${age} years old.`;
console.log(greeting); // "Hello, Alice! You are 30 years old."
在这个例子中,name
和age
变量被插入到字符串中,通过使用${}
。
多行文本
模板字符串简化了多行字符串的创建,无需使用换行符号(\n
):
let multiLine = `Lorem ipsum odor, consectetuer adipiscing elit.
Sit lorem mattis eget maximus.`;
console.log(multiLine);
内嵌表达式
在模板字符串中可以使用任何JavaScript表达式,包括函数调用:
let a = 5;
let b = 10;
let result = `The sum of ${a} and ${b} is ${a + b}.`;
console.log(result); // "The sum of 5 and 10 is 15."
function getGreeting(name) {
return `Hello, ${name}!`;
}
let greeting = `${getGreeting("Bob")}`;
console.log(greeting); // "Hello, Bob!"
当然,最好不要在字符串中调用函数,但如果非常想,就可以这样做。
GO TO FULL VERSION