如何在 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 循环和空数组实现了我们的目标,这是最慢的方法。