今天来了解下如何在 js 中的字符串字符之间添加空格。
1. String split() 和 Split join() 方法
要在字符串的字符之间添加空格，请对字符串调用 split() 方法以获取字符数组，然后对该数组调用 join() 方法以使用空格分隔符连接字符。
例如：
function addSpace(str) {
return str.split('').join(' ');
}
const str1 = 'coffee';
const str2 = 'banana';
console.log(addSpace(str1)) // c o f f e e
console.log(addSpace(str2)) // b a n a n a
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('')) // [ 'c', 'o', 'f', 'f', 'e', 'e' ]
console.log(str2.split('')) // [ 'b', 'a', 'n', 'a', 'n', 'a' ]
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() 会使它成为数组中的一个单独元素，该元素将与其他空格组合。
const str1 = 'co ffee';
const str2 = 'bana na';
console.log(str1.split('')) // [ 'c', 'o', ' ', ' ', 'f', 'f', 'e', 'e']
console.log(str2.split('')) // [ 'b', 'a', 'n', 'a', ' ', ' ', 'n', 'a']
如果我们想避免字符的多重间距，我们可以在 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、null、undefined、0、' '（空字符串）和 NaN。 其他所有值都是真实的。
2.for…of 循环
对于命令的方法，我们可以使用 JavaScript for...of 循环在字符串的字符之间添加一个空格。
function addSpace(str) {
let result = '';
for (const char of str) {
result += char + ' ';
}
// 移除末尾空格，ES2019 新方法。还有 trimStart() 方法，移除开头空格
return result.trimEnd()
}
const str1 = 'coffee';
const str2 = 'banana';
console.log(addSpace(str1)); // c o f f e e
console.log(addSpace(str2)); // b a n a n a
要处理前面讨论的情况，其中字符串在某些字符之间有空格，请在每次迭代的字符上调用 trim()，并添加一个 if 检查以确保它是真实的，然后再将它和空格添加到累积结果中：
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
其实解决类似问题并不复杂，主要还是考察对于字符串一些常见 API 方法的使用和熟悉程度。
