JavaScript 中需要了解的字符串方法

0 Shares

在不了解其运作方式的情况下处理字符串，对任何开发者来说都无疑是一场噩梦。

为了摆脱这些困扰，我们需要深入理解 JavaScript 中字符串的基本属性和方法。

让我们逐步探索它们。

length 属性能够返回字符串的字符长度。

const company = "techblik.com";
console.log(company.length);

toUpperCase() 方法可以将字符串中的所有字符转换为大写并返回，但不会修改原始字符串。

const company = "techblik.com";
const upperCaseCompany = company.toUpperCase();
console.log(upperCaseCompany);

toLowerCase() 方法则可以将字符串中的所有字符转换为小写并返回，同样不会改变原始字符串。

const company = "techblik.com";
const lowerCaseCompany = company.toLowerCase();
console.log(lowerCaseCompany);

trim() 方法可以删除字符串开头和结尾的空白字符，并返回处理后的新字符串。

const company = "         Geek   Flare           ";
console.log(company);
console.log(company.trim());

charAt() 方法返回指定索引位置的字符。如果索引无效，则返回一个空字符串。

const company = "techblik.com";
console.log(company.charAt(2));
console.log(company.charAt(10));

charCodeAt() 方法返回指定索引位置字符的 Unicode 编码。如果索引无效，则返回 NaN。

const company = "techblik.com";
console.log(company.charCodeAt(2));
console.log(company.charCodeAt(10));

slice() 方法可以返回从起始索引到结束索引（不包含结束索引）的子字符串。例如，string.slice(0, 6) 返回索引 0 到索引 5 的子字符串。

const company = "techblik.com";
console.log(company.slice(0, 4));

如果 slice() 方法只接收一个参数，那么它将返回从给定索引到字符串末尾的子字符串。

const company = "techblik.com";
console.log(company.slice(4));

slice() 方法还支持负索引。负索引从字符串的末尾开始计数。例如，对于字符串 “techblik.com”：

t = -10, e = -9, c = -8, h = -7, b = -6, l = -5, i = -4, k = -3, . = -2, c = -1

那么，string.slice(-9, -5) 将返回 “echb”。而string.slice(-5) 则会返回 “lik.com”

const company = "techblik.com";
console.log(company.slice(-9, -5));
console.log(company.slice(-5));

需要注意的是，负索引在 IE8 及更早版本中可能无法正常工作。

substr() 方法与 slice() 方法类似，但它的第二个参数是需要提取的子字符串长度，而非结束索引。

const company = "techblik.com";
console.log(company.substr(4, 5));

此外，还有一种名为 substring() 的方法，它和 slice() 方法功能相似。然而，substring() 方法不允许使用负索引。你可以尝试一下。

replace() 方法用新的子字符串替换指定子字符串的第一个匹配项。

const statement = "Visit the site Google";
console.log(statement.replace("Google", "techblik.com"));

indexOf() 方法返回字符串中给定子字符串首次出现的索引位置。如果字符串中不存在该子字符串，则返回 -1。

const company = "techblik.com";
console.log(company.indexOf("Flare"));
console.log(company.indexOf("o"));

indexOf() 方法还可以接受第二个参数，作为起始搜索位置的索引。

const company = "techblik.com";
console.log(company.indexOf("e"));
console.log(company.indexOf("e", 5));

还有一个名为 lastIndexOf() 的方法，其功能与 indexOf() 类似，但 lastIndexOf() 方法从字符串的末尾开始向前搜索，并返回该字符首次出现的索引位置。尝试一下 company.lastIndexOf('e')。

split() 方法使用指定的分隔符分割字符串，并将分割后的部分作为数组返回。

const statement = "Visit, the, site, techblik.com";
console.log(statement.split(" "));
console.log(statement.split(", "));

当然，字符串的方法远不止这些，建议查阅相关文档，探索其他可能有用的方法，以便在特定情况下选用合适的工具。

如果没有找到你需要的，请尝试使用具体的关键词进行搜索。

祝你编码愉快 🙂

接下来，可以探索一些流行的 JavaScript 框架。