如何在JavaScript中将字符串转换为字符数组?


本教程将教你如何在JavaScript中将字符串转换为字符数组。字符串是字符序列。为了解决我们的问题,我们只需要将每个字符分割开来。

在JavaScript中,有多种方法可以从字符串创建字符数组,一些内置方法可以解决我们的问题。在本教程的最后,我们还将学习通过弹出单个字符并将其推入数组来手动将字符串转换为数组的方法。

本教程将介绍五种不同的将字符串转换为数组的方法。所有方法都将逐一解释,如下所示。

  • 使用`split()`方法

  • 使用`Array.from()`方法

  • 使用`Object.assign()`方法

  • 使用扩展运算符

  • 创建自定义函数

使用`split()`方法

正如我们在引言中讨论的那样,字符串是字符序列,我们只需要**分割**每个字符。**split()**方法是JavaScript中内置的方法,它可以做到这一点。我们将传递空字符串作为分隔符,以便它可以将字符串分割成字符并 *返回字符数组*。

语法

下面给出JavaScript中`split()`方法的语法。

let string = "tutorialsPoint";
let charArray = string.split(delimiter)

参数

  • **分隔符** - 它是分隔符。在本例中,我们将使用空字符串来分隔每个字符。

示例

<html>
<head>
   <title> Example - Converting string to character array </title>
</head>
<body>
   <h2> Converting string to character array. </h2>
   <p> Using the string.split('') method to convert to the character array:</p>
   <div id="charArray"> </div>
   <script type="text/javascript">
      let charArray = document.getElementById("charArray");
      let string = "tutorialsPoint";
      let arrayOfChar = string.split(''); // passing empty string as a delimeter.
      charArray.innerHTML = '[ ' + arrayOfChar + ' ]';
   </script>
</body>
</html>

在上面的输出中,用户可以看到字符串“tutorialsPoint”已转换为字符数组。

使用`Array.from()`方法

`Array.from()`是JavaScript内置的库方法。字符串是可迭代对象,`Array.from()`将可迭代对象作为参数,并返回其值的数组。可以说,`Array.from()`方法用于从我们作为参数传递的任何实例创建数组。

语法

下面给出使用`Array.from()`方法的语法。

let str = "Example string";
let array = Array.from( str );

参数

  • **str** - 它可以是任何 *可迭代对象*。字符串也是可迭代的,因此这里我们将字符串作为参数传递,该方法将返回字符数组。

示例

<html>
<body>
   <h2> Converting string to character array </h2>
   <h4> Using the Array.from() method to convert to the character array:</h4>
   <div id="charArray"> </div>
   <script type="text/javascript">
      let array = document.getElementById("charArray");
      let str = " Example string ";
      let arrayOfChar = Array.from(str);
      array.innerHTML = '[ ' + arrayOfChar + ' ]';
   </script>
</body>
</html>

使用`Object.assign()`方法

将字符串转换为字符数组的第三种方法是使用**Object.assign()**方法。它将内容从源对象复制到目标对象。这里,我们将字符串作为源对象,并将空数组用作目标对象。

语法

用户可以按照以下语法使用`Object.assign()`方法将字符串的所有字符复制到空数组中。

Let string = "Example";
Let array = Object.assign([ ], string );

示例

<html>
<body>
   <h2> Converting string to character array </h2>
   <h4> Using the Object.assing() method to convert to the character array:</h4>
   <div id="outputArray"> </div>
   <script type="text/javascript">
      let outputArray = document.getElementById("outputArray");
      let string = "Converting to the charater array. ";
      let array = Object.assign([], string);
      outputArray.innerHTML = '[ ' + array + ' ]';
   </script>
</body>
</html>

使用扩展运算符

在JavaScript中,扩展运算符是一个有趣的功能。扩展运算符的语法只是**三个点(...)**。它允许用户将整个可迭代对象或数组克隆到另一个数组中。我们将创建一个空数组,并使用扩展运算符将字符串的所有字符包装到空数组中。

语法

let string = "This is a string.";
let array = [...string]; // using spread operator

示例

<!DOCTYPE html>
<html>
<body>
   <h2> Converting string to character array. </h2>
   <h4> Using the spread operator to convert to the character array: </h4>
   <div id="charArray"> </div>
   <script>
      let array = document.getElementById("charArray");
      let InitialString = "This is a string.";
      let charArray = [...InitialString];
      array.innerHTML = '[ ' + charArray + ' ]';
   </script>
</body>
</html>

创建自定义函数

在此方法中,我们将创建一个空数组。我们将使用for循环遍历字符串,并将字符串的每个字符推入数组。这样,我们将从字符串生成新的字符数组。

语法

请按照以下语法实现自定义函数。

let array = [ ];
for ( let i=0; I < string.length; i++ ) {
   array.push ( string[i] );
}

示例

<!DOCTYPE html>
<html>
<body>
   <h2> Converting string to character array. </h2>
   <p> Using the for loop push the character one by one to char array: </p>
   <div id="outputArray"></div>
   <script>
      let outputArray = document.getElementById("outputArray");
      let string = "It's a string. ";
      let resultArray = []; // empty array

      // push the one by one character from the string to array using for loop.
      for (let i = 0; i < string.length; i++) {
         resultArray.push(string[i]);
      }
      outputArray.innerHTML = '[ ' + resultArray + ' ]';
   </script>
</body>
</html>

结论

我们学习了五种将字符串转换为字符数组的方法。使用`split()`方法的第一种方法是最流行的。在最后一种方法中,我们通过使用for循环和空数组实现了我们的目标,这是最慢的方法。

更新于:2022年7月25日

6K+ 次浏览

启动你的职业生涯

通过完成课程获得认证

开始学习
广告
© . All rights reserved.