JavaScript 字符串的常用方法有哪些

读心悦
372 阅读5分钟

速览

JavaScript 字符串的常用方法包括 charAt、charCodeAt、concat、indexOf、lastIndexOf、slice、substring、toLowerCase、toUpperCase、trim、replace、split、padStart、padEnd 等167。

详答

1. 基本信息

JavaScript 中的字符串是一种原始数据类型，提供了丰富的操作方法来处理文本。

2. 常用方法详解

  • charAt(index): 返回指定索引位置的字符15。
  • charCodeAt(index): 返回指定索引位置字符的 Unicode 编码15。
  • concat(string2, string3, ..., stringN): 连接两个或多个字符串，返回新的字符串5。
  • indexOf(searchValue, fromIndex): 返回在字符串中首次找到指定值的索引，如果未找到则返回 -1135。
  • lastIndexOf(searchValue, fromIndex): 返回在字符串中最后一次找到指定值的索引，如果未找到则返回 -1158。
  • slice(beginIndex, endIndex): 提取字符串的片段，并在新的字符串中返回被提取的部分157。
  • substring(start, end): 提取字符串中介于两个指定下标之间的字符157。
  • toLowerCase(): 将字符串中的所有字符转换为小写357。
  • toUpperCase(): 将字符串中的所有字符转换为大写357。
  • trim(): 去除字符串两端的空白字符237。
  • replace(searchValue, newValue): 在字符串中查找匹配的子字符串，并替换为新的值6。
  • split(separator, limit): 将一个字符串分割为子字符串数组，然后将结果作为数组返回367。
  • padStart(targetLength, padString): 用指定的字符串填充当前字符串的开头，直到达到指定的长度4。
  • padEnd(targetLength, padString): 用指定的字符串填充当前字符串的末尾，直到达到指定的长度4。

3. 示例

const str = "hello world";
console.log(str.charAt(1)); // 输出: e
console.log(str.charCodeAt(1)); // 输出: 101
console.log(str.concat("!!!")); // 输出: hello world!!!
console.log(str.indexOf("o")); // 输出: 4
console.log(str.slice(0, 5)); // 输出: hello
console.log(str.substring(0, 5)); // 输出: hello
console.log(str.toLowerCase()); // 输出: hello world
console.log(str.toUpperCase()); // 输出: HELLO WORLD
console.log(str.trim()); // 输出: hello world（如果字符串两端没有空白则不变）
console.log(str.replace("world", "JavaScript")); // 输出: hello JavaScript
console.log(str.split(" ")); // 输出: ["hello", "world"]
console.log(str.padStart(15, " *")); // 输出: " * * *hello world"
console.log(str.padEnd(15, " *")); // 输出: "hello world * * *"

延展

  • 如果需要更深入地了解 JavaScript 字符串方法，可以查阅 MDN Web Docs 或其他权威的 JavaScript 文档。
  • 尝试使用不同的字符串方法来处理文本，以加深对它们的理解和掌握。
  • 思考如何组合使用这些方法来实现更复杂的字符串操作需求。

图解

mindmap
  root((JavaScript字符串常用方法))
    字符串长度与获取
      获取长度
        length属性
          基本用法
          注意事项
      获取指定位置字符
        charAt方法
          使用方式
          返回值
        charCodeAt方法
          获取Unicode值
          示例代码
    字符串查找与匹配
      查找位置
        indexOf方法
          首次出现位置
          可选参数
        lastIndexOf方法
          最后一次出现位置
          可选参数
      匹配检索
        search方法
          正则表达式匹配
          返回值
    字符串修改与转换
      字符串拼接
        concat方法
          多个字符串拼接
          注意事项
        字符串插值
          使用模板字符串
          示例
      大小写转换
        toLowerCase方法
          转换为小写
          示例
        toUpperCase方法
          转换为大写
          示例
    字符串裁剪与填充
      去除空白
        trim方法
          去除首尾空白
          示例
      字符串填充
        padStart方法
          前面填充字符
          示例
        padEnd方法
          后面填充字符
          示例
    字符串分割与组合
      分割字符串
        split方法
          按照规则分割
          返回值
      组合字符串
        join方法
          数组元素组合
          示例

图表说明

  • 信息来源：结合用户查询的JavaScript字符串常用方法，从腾讯云开发、CSDN博客、PHP中文网等来源获取相关信息478。
  • 可信度评估：该图解综合了多篇关于JavaScript字符串常用方法的文章和教程，包括腾讯云开发者和CSDN博客等可信来源，内容全面且详细，涵盖了字符串长度获取、字符查找、匹配检索、修改转换、裁剪填充、分割组合等多个方面，因此具有较高的可信度和参考价值。图解中的每个方法都提供了使用示例和注意事项，有助于用户更好地理解和应用这些字符串方法148。

JavaScript字符串常用方法

方法名描述示例代码参数返回值
charAt(index)返回指定索引位置的字符let str = "JavaScript"; console.log(str.charAt(4)); // 输出: Sindex（索引）指定索引位置的字符
concat()连接两个或多个字符串，并返回新的字符串let result = str1.concat(",", str2, "!"); console.log(result); // 输出: Hello,World!一个或多个字符串连接后的新字符串
split()通过将字符串分割成子字符串数组，将一个字符串拆分为一个数组"1,2".split(","); // ['1', '2']分隔符，可选：限制返回数组的长度字符串数组
indexOf()返回在字符串中首次找到的子字符串的索引，如果未找到则返回-1let str = "Hello world!"; console.log(str.indexOf("world")); // 输出: 6要搜索的子字符串子字符串首次出现的索引
substring()提取字符串中介于两个指定下标之间的字符let str = "Hello world!"; console.log(str.substring(3, 7)); // 输出: lo wstart（开始索引），end（结束索引，不包括）提取的子字符串
toLowerCase()将字符串转换为小写let str = "Hello World!"; console.log(str.toLowerCase()); // 输出: hello world!无转换为小写后的字符串
toUpperCase()将字符串转换为大写let str = "Hello World!"; console.log(str.toUpperCase()); // 输出: HELLO WORLD!无转换为大写后的字符串
trim()去除字符串两端的空白字符let str = " Hello World! "; console.log(str.trim()); // 输出: Hello World!无去除空白后的字符串
length返回字符串的长度let str = "Hello"; console.log(str.length); // 输出: 5无字符串的长度

备注

  • 根据搜索结果整理，涵盖了JavaScript字符串处理中常用的方法，包括字符访问、连接、分割、查找、子字符串提取、大小写转换和去除空白等。111415

JavaScript字符串高级操作

方法/特性描述示例代码备注
模板字符串使用反引号创建，可以嵌入表达式和换行符let result = str1,{str1},{str2}!; console.log(result); // 输出: Hello,World!ES6引入的新特性14
多行字符串使用反斜杠将长字符串分多行书写，输出时仍为单行var longString = 'Long\\ long\\ long\\ string'; console.log(longString); // 输出: Longlonglongstring提高代码可读性12
字符串遍历使用for...of循环遍历字符串的每个字符let str = "Hello"; for (let char of str) { console.log(char); }ES6引入的新语法
字符串搜索与替换使用正则表达式进行复杂的搜索和替换操作let str = "Hello World!"; let newStr = str.replace(/world/i, "JavaScript"); console.log(newStr); // 输出: Hello JavaScript!利用正则表达式实现高级匹配14
字符串包含使用includes()方法检查字符串是否包含子字符串let str = "Hello World!"; console.log(str.includes("World")); // 输出: trueES6引入的新方法
字符串重复使用repeat()方法重复字符串指定的次数let str = "Hello"; console.log(str.repeat(3)); // 输出: HelloHelloHelloES6引入的新方法

备注

  • 表格总结了JavaScript字符串处理中的一些高级操作，包括模板字符串、多行字符串、字符串遍历、正则表达式搜索与替换、字符串包含检查以及字符串重复等。121314
  • 这些高级操作提供了更强大和灵活的字符串处理能力，适用于更复杂的场景和需求。
avatar
文章
阅读
粉丝