likes
comments
collection
share

JavaScript开发：字符串数据在开发中的使用总结

作者站长头像
站长
· 阅读数 34

本文以《JavaScript高级程序设计》第4版作为基础参考，整理使用JavaScript开发过程中，字符串数据使用相关的知识点。

本文是开发知识点系列第十篇。

字符串数据是用于表示文本数据的数据类型，是开发中基本的数据类型。在实际开发中，主要是对字符串进行处理。

字符串创建

使用字符串数据之前，首先需要创建字符串数据

  1. 字符串字面量：使用引号（单引号或双引号）将文本括起来创建字符串
const str1 = "Hello";
const str2 = 'World';
  1. 使用String构造函数：使用new String()构造函数创建字符串对象
const str = new String("Hello");

可以使用构造函数创建字符串对象，但通常更常见和推荐的是使用字符串字面量创建字符串。字符串字面量更简洁、易读，并且在大多数情况下，JavaScript会自动将字符串字面量转换为字符串对象，进而字面量具备引用数据类型的特性（这是JavaScript内部机制）。

字符串对象静态方法

字符串数据类型有一些内置的静态方法

  1. String.fromCharCode(): 根据一串Unicode值创建一个字符串
const str = String.fromCharCode(65, 66, 67);
console.log(str); // 输出 "ABC"
  1. String.fromCodePoint(): 根据一个或多个Unicode码点创建一个字符串
const str = String.fromCodePoint(65, 66, 67);
console.log(str); // 输出 "ABC"
  1. String.raw(): 返回一个字符串的原始字符串形式，忽略转义字符的影响
const str = String.raw(`Hello\nWorld`);
console.log(str); // 输出 "Hello\nWorld"

字符串对象实例属性

字符串对象实例有一个对象属性length。

length属性返回的是字符串中的字符个数，而不是字节数。

对于包含中文字符的字符串，每个中文字符都会被视为一个字符，因此String.prototype.length会返回中文字符的个数。例如

const str = "你好，世界";
console.log(str.length); // 输出 5

字符串"你好，世界"包含5个中文字符，length返回的是5。

需要注意的是，JavaScript中的字符串是基于UTF-16编码的，对于一些特殊字符（如Emoji表情），可能会由于其编码方式而占用多个字符位置。但在这种情况下，String.prototype.length仍然会返回占用的字符个数。

为了准确计算字符串数据的字符数，需要更为精准的计算方法。以下是一个使用 codePointAt() 方法来计算字符串字符数的函数

function countCharacters(str) {
    let count = 0;
    for (let i = 0; i < str.length; i++) {
        if (str[i].codePointAt(0) > 0xFFFF) {
             count+=2;
             continue;
        }
        count++;
    }
    return count;
}

// 示例用法
const str = "你好，世界 𠮷";
const characterCount = countCharacters(str);
console.log(characterCount); // 输出 8

利用双字符的UTF-16编码都大于0xFFFF的性质判断是否是双字符，如果是双字符长度多加1。

字符串对象实例方法

一些字符串对象实例的常见方法

  1. charAt(index): 返回指定索引位置的字符。
  2. charCodeAt(index): 返回指定索引位置的字符的 Unicode 编码。
  3. concat(str1, str2, ...): 将多个字符串连接起来，返回一个新的字符串。
  4. includes(searchValue, startIndex): 判断字符串是否包含指定的子字符串。
  5. indexOf(searchValue, startIndex): 返回指定字符串在原字符串中首次出现的索引位置。
  6. lastIndexOf(searchValue, startIndex): 返回指定字符串在原字符串中最后一次出现的索引位置。
  7. slice(startIndex, endIndex): 提取原字符串中指定索引范围的子字符串。
  8. substring(startIndex, endIndex): 提取原字符串中指定索引范围的子字符串。
  9. substr(startIndex, length): 从原字符串中指定的索引位置开始，提取指定长度的子字符串。
  10. replace(searchValue, replaceValue): 替换字符串中的指定子字符串。
  11. split(separator, limit): 将字符串分割成子字符串数组，根据指定的分隔符进行分割。
  12. toLowerCase(): 将字符串转换为小写形式。
  13. toUpperCase(): 将字符串转换为大写形式。
  14. trim(): 去除字符串两端的空格。
  15. repeat(count): 将字符串重复指定次数。
  16. startsWith(searchValue, startIndex): 判断字符串是否以指定的子字符串开头。
  17. endsWith(searchValue, endIndex): 判断字符串是否以指定的子字符串结尾。
  18. match(regexp): 在字符串中搜索匹配指定正则表达式的结果。
  19. search(regexp): 在字符串中搜索匹配指定正则表达式的结果。
  20. toString(): 返回字符串对象的原始字符串形式。

一些方法使用示例

  1. charAt(index): 返回指定索引位置的字符
const str = "Hello";
console.log(str.charAt(0)); // 输出 "H"
  1. concat(str1, str2, ...): 将多个字符串连接起来，返回一个新的字符串
const str1 = "Hello";
const str2 = "World";
console.log(str1.concat(" ", str2)); // 输出 "Hello World"
  1. indexOf(searchValue, startIndex): 返回指定字符串在原字符串中首次出现的索引位置
const str = "Hello World";
console.log(str.indexOf("o")); // 输出 4

找不到则返回-1

const str = "Hello World";
console.log(str.indexOf("t")); // 输出 -1

第二个参数使用

let str = 'Hello, world!';

console.log(str.indexOf('world', 7)); // 输出: 7
console.log(str.indexOf('world', 8)); // 输出: -1
  1. slice(startIndex, endIndex): 提取原字符串中指定索引范围的子字符串
const str = "Hello World";
console.log(str.slice(6, 11)); // 输出 "World"

slice(-1)返回字符串最后一个值

const str = "Hello World";
console.log(str.slice(-1)); // 输出 d
  1. split(separator, limit): 将字符串分割成子字符串数组，根据指定的分隔符进行分割
const str = "Hello,World,JavaScript";
console.log(str.split(",")); // 输出 ["Hello", "World", "JavaScript"]

split参数也可以为正则表达式

const str = "Hello,World,JavaScript";
console.log(str.split(/\W/)); // 输出 ["Hello", "World", "JavaScript"]
  1. toLowerCase(): 将字符串转换为小写形式
const str = "Hello";
console.log(str.toLowerCase()); // 输出 "hello"
  1. toUpperCase(): 将字符串转换为大写形式
const str = "Hello";
console.log(str.toUpperCase()); // 输出 "HELLO"
  1. includes()：判断字符串是否包含指定的子字符串
let str = 'Hello, world!';

console.log(str.includes('world')); // 输出: true

console.log(str.includes('world', 7)); // 输出: true
console.log(str.includes('world', 8)); // 输出: false
  1. startsWith()：判断字符串是否以指定的子字符串开头
let str = 'Hello, world!';
console.log(str.startsWith('Hello')); // 输出: true

console.log(str.startsWith('Hello', 0)); // 输出: true
console.log(str.startsWith('world', 7)); // 输出: true
console.log(str.startsWith('world', 8)); // 输出: false

ES6对字符串对象的扩展

一些 ES6 对字符串数据的扩展

  1. 模板字面量（Template Literals）：使用反引号（`）来创建多行字符串和插入变量
const name = "Alice";
const message = `Hello, ${name}!`;
console.log(message); // 输出 "Hello, Alice!"
  1. 字符串插值（String Interpolation）：在模板字面量中可以直接插入表达式
const x = 10;
const y = 20;
const result = `The sum of ${x} and ${y} is ${x + y}.`;
console.log(result); // 输出 "The sum of 10 and 20 is 30."
  1. 多行字符串：使用模板字面量可以直接创建多行字符串，无需使用转义字符
const multiLine = `This is
a multi-line
string.`;
console.log(multiLine);
// 输出:
// This is
// a multi-line
// string.
  1. 字符串方法：ES6 引入了一些新的字符串方法，如 startsWith()、endsWith()、includes()、repeat() 等
const str = "Hello World";
console.log(str.startsWith("Hello")); // 输出 true
console.log(str.endsWith("World")); // 输出 true
console.log(str.includes("o")); // 输出 true
console.log("abc".repeat(3)); // 输出 "abcabcabc"
  1. 字符串解构赋值（String Destructuring）：可以将字符串按照指定的模式解构赋值给变量
const [first, second, third] = "ABC";
console.log(first); // 输出 "A"
console.log(second); // 输出 "B"
console.log(third); // 输出 "C"

更多扩展可以参考《ES6标准入门》或者关注 ECMAScript 的官方网站www.ecma-international.org 或者关注developer.mozilla.org/en-US/docs/…

字符串开发需求场景总结

一些开发需求场景示例

  1. 字符串拼接
const str1 = "Hello";
const str2 = "World";
const result1 = str1 + str2;
const result2 = `${str1}${str2}`;
const result3 = str1.concat(str2);
console.log(result1); // 输出 "HelloWorld"
console.log(result2); // 输出 "HelloWorld"
console.log(result3); // 输出 "HelloWorld"
  1. 字符串截取和提取
const str = "Hello World";
console.log(str.slice(6, 11)); // 输出 "World"
console.log(str.substring(6, 11)); // 输出 "World"
  1. 字符串搜索和匹配
const str = "Hello World";
console.log(str.includes("World")); // 输出 true
console.log(str.indexOf("World") > -1); // 输出 true
  1. 字符串替换和修改
const str = "Hello World";
const newStr = str.replace("World", "JavaScript");
console.log(newStr); // 输出 "Hello JavaScript"
  1. 字符串分割和拆分
const str = "Hello,World,JavaScript";
console.log(str.split(",")); // 输出 ["Hello", "World", "JavaScript"]
  1. 字符串格式化和转换
const str = "hello";
console.log(str.toUpperCase()); // 输出 "HELLO"
  1. 字符串编码和解码
const str = "Hello World";
const encodedStr = encodeURIComponent(str);
console.log(encodedStr); // 输出 "Hello%20World"
  1. 字符串校验和验证
const email = "test@example.com";
const isValidEmail = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
console.log(isValidEmail); // 输出 true
  1. 字符串排序和比较
const str1 = "apple";
const str2 = "banana";
console.log(str1.localeCompare(str2)); // 输出 -1，表示 str1 在 str2 之前
  1. 字符串国际化和本地化
const str = "Hello";
console.log(str.toLocaleUpperCase("fr-FR")); // 输出 "HELLO"（法语环境下的大写形式）

字符串方法和正则表达式结合使用

总结要求

  1. 字符串数据用于表示文本数据的数据类型
  2. 字符串数据的创建可以采用字面量和new String()方法，推荐字面量
  3. 字符串数据对象有若干静态方法，但在日常开发中并不常用
  4. 字符串数据对象有length属性，该属性不总是返回字符串的正确字符数
  5. ES6对字符串数据有扩展：模板字符串、多行字符串、字符串解构等
  6. 主要还是总结字符串数据的使用方法

本文完。

转载自:https://juejin.cn/post/7286482043140046906
评论
请登录