Bootstrap

JavaScript字符串类型详解

目录

一、创建字符串

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中的字符串是不可变的,这意味着一旦创建了一个字符串,就不能直接修改其内容。所有字符串方法(如 replacetoUpperCase)都会返回新字符串,原字符串不变。

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

三、字符串的长度与索引

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

 var str = "Hello";
 console.log(str.length); // 输出:5
 console.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)可高效处理文本。

关键点:

  • 字符串不可变,操作返回新字符串。

  • 熟悉常用方法(如 splitreplacetrim)。

  • 模板字符串简化复杂拼接。

  • 注意编码问题(如 Unicode 字符长度)。

悦读

道可道,非常道;名可名,非常名。 无名,天地之始,有名,万物之母。 故常无欲,以观其妙,常有欲,以观其徼。 此两者,同出而异名,同谓之玄,玄之又玄,众妙之门。

;