JavaScript在字符串的字符之间添加空格

学习如何在JavaScript中轻松地在字符串的字符之间添加空格.

1. 字符串的 split() 和 Split join() 方法

要在字符串的字符之间添加空格，可以对字符串调用split()方法，得到一个字符数组，然后对数组调用join()方法，之后用空格分隔符连接字符。例如：

function addSpace(str) {
  return str.split('').join(' ');
}
const str1 = 'www.zngg.net';
const str2 = 'ZNGG在线工具';
console.log(addSpace(str1)); // w w w . z n g g . n e t
console.log(addSpace(str2)); // Z N G G 在 线 工 具

String.split()方法使用指定的分隔符，将一个字符串分割成一个子字符串数组。例如：

const str1 = 'coffee,milk,tea';
const str2 = 'sun-moon-star';
console.log(str1.split(',')); // [ 'coffee', 'milk', 'tea' ]
console.log(str2.split('-')); // [ 'sun', 'moon', 'star' ]

通过使用一个空字符串('')作为分隔符，我们将会把所有的字符串字符分割成独立的数组元素：

const str1 = 'coffee';
const str2 = 'banana';
console.log(str1.split(''));
console.log(str2.split(''));

String.join()方法将一个数组中的每个字符串用分隔符连接起来，它将返回一个包含数组元素连接的新字符串：

const arr = ['a', 'b', 'c', 'd'];
console.log(arr.join(' ')); // a b c d
console.log(arr.join('-')); // a-b-c-d
console.log(arr.join('/')); // a/b/c/d

因此，在join()中填写一个空格字符，将会把数组元素使用空格相连接，返回一个用空格连接的字符串。

有些情况下，字符串中的某些字符之间已经包含了空格。在这种情况下，我们的方法将在这些字符之间添加更多的空格:

function addSpace(str) {
  return str.split('').join(' ');
}
const str1 = 'co  ffee';
const str2 = 'bana  na';
console.log(addSpace(str1)); // c o     f f e e
console.log(addSpace(str2)); // b a n a     n a

这是因为空格('')也是一个字符，就像字母一样，调用split()会使它成为数组中的一个独立元素，并与其他空格结合起来。

// These strings have spaces between some characters
const str1 = 'co  ffee';
const str2 = 'bana  na';
console.log(str1.split(''));
console.log(str2.split(''));

如果我们想避免字符之间有重复的间隔，我们可以在split()和join()之间插入一个对filter()方法的调用：

function addSpace(str) {
  return str
    .split('')
    .filter((item) => item.trim())
    .join(' ');
}
const str1 = 'co  ffee';
const str2 = 'bana  na';
console.log(addSpace(str1)); // c o f f e e
console.log(addSpace(str2)); // b a n a n a

Array.filter()方法返回一个新的数组，其中只包含原数组中的元素，这些元素的的值是由传递给 filter()的回调函数返回的。对空格(' ')调用trim()的结果是一个空字符串(' ')，这在JavaScript中不是一个真实的值。所以空格会从filter()返回的数组中排除。

提示: 在JavaScript中，只有六个false值：false、null、undefined、0、''（空字符串）和NaN。其他的值都是true。

2. for...of 循环

除此以外，我们还有其他方法在字符串的字符中间添加空格，例如我们可以使用JavaScript中的for...of循环来在字符串的字符之间添加一个空格。

function addSpace(str) {
  // 创建一个变量来存储结果
  let result = '';
  for (const char of str) {
    // 在每一次迭代中，都为字符增加一个空格
    result += char + ' ';
  }
  // 循环完毕以后移除字符串最后的空格
  return result.trimEnd();
}
const str1 = 'WWW.ZNGG.NET';
const str2 = 'ZNGG在线工具';
console.log(addSpace(str1)); // W W W . Z N G G . N E T
console.log(addSpace(str2)); // Z N G G 在 线 工 具

为了处理上面空格重复的问题，即字符串在一些字符之间已经有了空格，所以在每次迭代的字符上调用trim()，并添加一个if检查，以确保它是 true 的，然后再把它和空格加到累积的结果中。

如果是空格(' ')在trim()以后，则会变成空字符串，上面提到的六个false值，其中一个就是空字符串，因此只有当字符不是空格时，才会累加。

function addSpace(str) {
  let result = '';
  for (const char of str) {
    if (char.trim()) {
      result += char + ' ';
    }
  }
  return result.trimEnd();
}
const str1 = 'co  ffee';
const str2 = 'bana  na';
console.log(addSpace(str1)); // c o f f e e
console.log(addSpace(str2)); // b a n a n a