如果有别的语言的基础,Javascript字符串的概念是非常容易理解的。因此这里不多赘述直接讲一些字符串常用的方法。

查看字符串的长度

cosnt s = "Hello World";
console.log(s.length);//结果为11

转大写/小写

cosnt s = "Hello World";
console.log(s.toUpperCase());//结果为"Hello WORLD!"
cosnt s = "Hello World";
console.log(s.toLowerCase());//结果为“hello world!”

从字符串中抽取/分割出一部分

javascript有两个方法可以实现这个功能一个是substring(), 一个是slice() 我先从substring讲起,它的语法为:

str.substring(indexStart, indexEnd);

其中

  • indexStart:子串的起始位置(包含这个位置)。
  • indexEnd:子串的结束位置(不包含这个位置)。如果省略,则截取到字符串末尾。
  • 注意:substring 会自动处理顺序,如果 indexStart > indexEnd,会交换两者。

下面是一些常见的例子

const str = "Hello, World!";
// 从索引 0 到 5 (不包含 5)
console.log(str.substring(0, 5)); // 输出: "Hello"
// 只给一个参数 → 截取到末尾
console.log(str.substring(7)); // 输出: "World!"
// start > end 会自动交换
console.log(str.substring(5, 0)); // 输出: "Hello"
// 包含空格和标点
console.log(str.substring(5, 7)); // 输出: ", "
// substring 不支持负数
console.log(str.substring(-3, 3)); // 输出: "abc" (-3 会被当作 0)

总结

  • substring 适合提取子串,尤其当你不想处理负数索引时。
  • 它总是从 小索引 → 大索引 提取,如果写反会自动交换。
  • 如果要支持负数索引,可以用 slice()。

接下来讲slice()。slice不仅是string的方法,array也有这个方法(我将会在array相关的文档中详细讲这里不多赘述) 它的语法为:

str.slice(beginIndex, endIndex);
  • beginIndex:起始位置(包含),可以是负数(从尾部倒数)。
  • endIndex:结束位置(不包含),如果省略,就截取到末尾。
  • 返回值:新字符串(不会改变原始数据)。

一下是使用例子

const str = "Hello, World!";
// 正向索引
console.log(str.slice(0, 5)); // "Hello"
// 省略 endIndex
console.log(str.slice(7)); // "World!"
// 支持负数索引
console.log(str.slice(-6)); // "World!"
console.log(str.slice(-6, -1)); // "World"
// 和 substring 的区别:不会交换参数
console.log(str.slice(5, 0)); // "" (空字符串)

最后再总结下它们的区别

特性substring()slice()
支持负数索引❌✅
参数顺序自动交换✅❌
适用对象字符串字符串 & 数组
改变原数据❌❌

切割字符串

Javascript的分割方法为split() 它的用法如下

str.split(separator, limit);

其中

  • separator:分隔符,可以是字符串或正则表达式。如果是空字符串 "",会按单个字符拆分。
  • limit(可选):返回的数组最大长度,多余的会被丢弃。
  • 返回值是一个数组 下面是几个简单的例子
const str = "apple,banana,orange";
// 按逗号分割
console.log(str.split(",")); // ["apple", "banana", "orange"]
// 按空格分割
console.log("Hello World JS".split(" ")); // ["Hello", "World", "JS"]
// 按每个字符拆分
console.log("Hello".split("")); // ["H", "e", "l", "l", "o"]
// 限制结果长度
console.log("a,b,c,d".split(",", 2)); // ["a", "b"]

它还可以搭配正则表达式使用,这算是高阶用法新手不要求掌握

const text = "apple1banana2orange3";
// 按数字分割
console.log(text.split(/[0-9]/)); // ["apple", "banana", "orange", ""]
// 忽略多个空格
console.log("I love JS".split(/\s+/)); // ["I", "love", "JS"]

它很多使用场景,这里我拿一个最容易前置知识最少的来讲

比如用户输入了一句话,我们要统计这段话中一共有几个单词

const sentence = "I love JavaScript and Node.js";
const words = sentence.split(" ");
console.log(words); // ["I", "love", "JavaScript", "and", "Node.js"]
console.log("单词数:", words.length); // 单词数: 5

另外还有一些比较常用的使用场景,但需要一些前置知识

比如很多时候数据是逗号分隔的(CSV 格式),或者用空格、制表符分隔,split() 正好派上用场。

const csvLine = "Tom,20,Shanghai";
const fields = csvLine.split(",");
console.log(fields); // ["Tom", "20", "Shanghai"]
// 再把数据组装成对象
const person = {
name: fields[0],
age: Number(fields[1]),
city: fields[2],
};
console.log(person);
// { name: "Tom", age: 20, city: "Shanghai" }

还有要分割路径获取文件名、扩展名,或者解析 URL的情况: 这里的pop()用途为移除并返回数组中的最后一个元素

const filePath = "/user/local/bin/test.txt";
const parts = filePath.split("/");
console.log(parts); // ["", "user", "local", "bin", "test.txt"]
const fileName = parts.pop(); // "test.txt"
const ext = fileName.split(".").pop(); // "txt"
console.log("文件名:", fileName);
console.log("扩展名:", ext);