在JS中的另一个字符串的特定索引处插入字符串

作者

在 JavaScript 中另一个字符串的特定索引处插入字符串

Insert String at specific Index of another String in JS

要在另一个字符串的特定索引处插入一个字符串：

  1. 使用该slice()方法将字符获取到索引。
  2. 使用slice()方法获取索引后的字符。
  3. 使用加法运算符在字符之间添加字符串。
索引.js
function insertAtIndex(str, substring, index) {
  return str.slice(0, index) + substring + str.slice(index);
}

const str = 'he world';
const substring = 'llo';
const index = 2;

// 👇️ hello world
console.log(insertAtIndex(str, substring, index));

该insertAtIndex()函数将一个字符串、一个子字符串和一个索引作为参数。

该函数将子字符串插入到字符串中提供的索引处。

String.slice方法提取字符串的一部分并将其返回，而不修改原始字符串。

该String.slice()方法采用以下参数：

姓名 描述
起始索引 要包含在返回的子字符串中的第一个字符的索引
结束索引 要从返回的子字符串中排除的第一个字符的索引

要获取指定索引之前的字符串部分，我们从索引
0开始，但不包括提供的索引。

索引.js
const str = 'he world';

// 👇️ "he"
console.log(str.slice(0, 2));
JavaScript 索引是从零开始的，因此字符串中的第一个字符的索引为0，最后一个字符的索引为。 string.length - 1

当只有一个参数传递给该String.slice()方法时，切片会到达字符串的末尾。

索引.js
const str = 'he world';

const index = 2;

// 👇️ ' world'
console.dir(str.slice(index));

切片从索引开始2，一直到字符串的末尾。

我们使用加法 (+) 运算符在索引处插入字符串。

索引.js
const str = 'he world';

const index = 2;

const result = str.slice(0, index) + 'llo' + str.slice(index);

// 👇️ "hello world"
console.log(result);

加法 (+) 运算符可用于连接两个或多个字符串。

在另一个字符串的特定索引处插入字符串splice

这是一个三步过程：

  1. 使用split()方法将字符串拆分为字符数组。
  2. 使用splice()方法将新字符串添加到指定索引处的数组。
  3. 使用该join()方法将数组连接成一个字符串。
索引.js
function insertAtIndex(str, substring, index) {
  const arr = str.split('');

  arr.splice(index, 0, substring);

  return arr.join('');
}

const str = 'he world';
const substring = 'llo';
const index = 2;

// 👇️ hello world
console.log(insertAtIndex(str, substring, index));

我们使用
String.split()
方法将字符串拆分为字符数组。

索引.js
const str = 'he world';

// [
//   'h', 'e', ' ',
//   'w', 'o', 'r',
//   'l', 'd'
// ]
console.log(str.split(''));

下一步是使用Array.splice()方法将新字符串添加到指定索引处的数组。

索引.js
const str = 'he world';
const substring = 'llo';
const index = 2;

const arr = str.split('');

arr.splice(index, 0, substring);

// [
//   'h', 'e', 'llo',
//   ' ', 'w', 'o',
//   'r', 'l', 'd'
// ]
console.log(arr);

Array.splice方法通过删除或替换现有元素或向数组添加新元素来更改数组的内容。

该方法采用以下参数：

姓名 描述
开始 开始更改数组的从零开始的索引
删除次数 要从数组中删除的元素数
第 1 项，…，第 N 项 start从索引开始向数组添加一个或多个值

我们使用了0参数deleteCount因为我们不想删除任何元素。

最后一步是使用Array.join()方法加入没有分隔符的数组。

索引.js
function insertAtIndex(str, substring, index) {
  const arr = str.split('');

  arr.splice(index, 0, substring);

  return arr.join('');
}

const str = 'he world';
const substring = 'llo';
const index = 2;

const arr = str.split('');

// 👇️ hello world
console.log(insertAtIndex(str, substring, index));

Array.join ()方法使用分隔符连接数组中的所有元素。

该方法采用的唯一参数Array.join()是separator– 用于分隔数组元素的字符串。

如果separator参数设置为空字符串，则数组元素之间没有任何字符连接。

使用子字符串在另一个字符串的特定索引处插入字符串

或者，您可以使用该String.substring()方法。

索引.js
function insertAtIndex(str, substring, index) {
  return str.substring(0, index) + substring + str.substring(index);
}

const str = 'he world';
const substring = 'llo';
const index = 2;

// 👇️ hello world
console.log(insertAtIndex(str, substring, index));

String.substring
()
方法返回从开始索引到排除结束索引的字符串片段。

该方法采用以下参数：

姓名 描述
起始索引 要包含在返回的子字符串中的第一个字符的索引
结束索引 要从返回的子字符串中排除的第一个字符的索引

我们以相同的方式使用slice()和方法。substring()

和方法
之间有几个
区别：String.substring()String.slice()

  • substring()如果开始索引大于结束索引，则该方法交换其开始索引和结束索引。在这种情况下，该slice()方法返回一个空字符串。
索引.js
const str = 'bobby';

console.log(str.substring(3, 0)); // 👉️ bob

console.log(str.slice(3, 0)); // 👉️ ''
  • 如果传递给的两个参数中的任何一个都substring()为负数，则将它们视为0.
索引.js
const str = 'bobby';

console.log(str.substring(-3)); // 👉️ bobby

console.log(str.slice(-3)); // 👉️ bby

当给定一个负索引时，该slice()方法从字符串的末尾向后计数以找到索引。

由于这些原因，您应该使用String.slice()方法而不是
String.substring().

该slice()方法以更可预测的方式实施。

我还写了一篇关于
如何在字符串的字符之间添加空格的文章。

# 额外资源

您可以通过查看以下教程来了解有关相关主题的更多信息：