怎么在JavaScript字符串的字符之間添加空格

這篇文章主要講解了“怎么在JavaScript字符串的字符之間添加空格”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“怎么在JavaScript字符串的字符之間添加空格”吧！

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';
// Passing an empty string ('') to the split method
// [ 'c', 'o', 'f', 'f', 'e', 'e' ]
console.log(str1.split(''));
// [ 'b', 'a', 'n', 'a', 'n', 'a' ]
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(' ');
}
// These strings have spaces between some characters
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';
// The space characters are separate elements of the
// array from split()
/**
 * [
  'c', 'o', ' ',
  ' ', 'f', 'f',
  'e', 'e'
]
 */
console.log(str1.split(''));
/**
 * [
  'b', 'a', 'n',
  'a', ' ', ' ',
  'n', 'a'
]
 */
console.log(str2.split(''));

如果我們想避免字符的多重間距，我們可以在 split() 和 join() 之間插入對 filter() 方法的調用。

function addSpace(str) {
  return str
    .split('')
    .filter((item) => item.trim())
    .join(' ');
}
// The strings have spaces between some characters
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) {
  // Create a variable to store the eventual result
  let result = '';
  for (const char of str) {
    // On each iteration, add the character and a space
    // to the variable
    result += char + ' ';
  }
  // Remove the space from the last character
  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) {
  // Create a variable to store the eventual result
  let result = '';
  for (const char of str) {
    // On each iteration, add the character and a space
    // to the variable
    // If the character is a space, trim it to an empty
    // string, then only add it if it is truthy
    if (char.trim()) {
      result += char + ' ';
    }
  }
  // Remove the space from the last character
  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

感謝各位的閱讀，以上就是“怎么在JavaScript字符串的字符之間添加空格”的內容了，經過本文的學習后，相信大家對怎么在JavaScript字符串的字符之間添加空格這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！