Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Converting string to an array in JavaScript
In JavaScript, converting strings to arrays is a common task when you need to split text into characters or words for processing. JavaScript provides several built-in methods to accomplish this conversion efficiently.
This article explores four different methods to convert strings to arrays, each suitable for different use cases and requirements.
Using the split() Method
The split() method is the most versatile approach for string-to-array conversion. It splits a string into an array of substrings based on a specified separator and returns a new array without modifying the original string.
The split() method accepts two optional parameters:
- separator - A string or regular expression that specifies where to split
- limit - An integer that limits the number of splits
Example 1: Basic Usage
<!DOCTYPE html>
<html>
<head>
<title>Converting string to an array in JavaScript</title>
<script>
var string = "We are Tutorials point";
const arr1 = string.split(' '); // Split by space
const arr2 = string.split(''); // Split into characters
const arr3 = string.split(" ", 2); // Split with limit
document.write("Words: " + arr1 + "<br>");
document.write("Characters: " + arr2 + "<br>");
document.write("Limited: " + arr3 + "<br>");
// Destructuring assignment
let [first, second, third, fourth] = string.split(' ');
document.write("Destructured: " + first + ", " + second + ", " + third + ", " + fourth);
</script>
</head>
<body>
</body>
</html>
Words: We,are,Tutorials,point Characters: W,e, ,a,r,e, ,T,u,t,o,r,i,a,l,s, ,p,o,i,n,t Limited: We,are Destructured: We, are, Tutorials, point
Example 2: Split with Regular Expression
You can use regular expressions to split on multiple characters simultaneously. This example splits on punctuation marks:
<!DOCTYPE html>
<html>
<head>
<title>Converting string to an array in JavaScript</title>
<script>
var string = "Oh, you are working tutorialspoint? that place is amazing! how can i join there; is there any vacancy? please let me know.";
const array = string.split(/[.,!,?,;]/);
document.write("Split sentences: " + array);
</script>
</head>
<body>
</body>
</html>
Split sentences: Oh, you are working tutorialspoint, that place is amazing, how can i join there, is there any vacancy, please let me know,
Using the Array.from() Method
The Array.from() method creates a new array from any iterable object, including strings. It's particularly useful for converting strings into character arrays.
Example
<!DOCTYPE html>
<html>
<head>
<title>Converting string to an array in JavaScript</title>
<script>
let string = "Tutorix";
let arr = Array.from(string);
document.write("Array from string: " + arr);
</script>
</head>
<body>
</body>
</html>
Array from string: T,u,t,o,r,i,x
Using the Spread Operator (...)
The spread operator (...) provides a concise way to convert strings to character arrays by expanding each character as a separate element.
Without the spread operator, a string would be treated as a single element:
let string = "hello world"; let array = [string]; // Result: ["hello world"]
Example
<!DOCTYPE html>
<html>
<head>
<title>Converting string to an array in JavaScript</title>
<script>
let string = "Let's go to new york";
let arr = [...string];
document.write("Using spread operator: " + arr);
</script>
</head>
<body>
</body>
</html>
Using spread operator: L,e,t,',s, ,g,o, ,t,o, ,n,e,w, ,y,o,r,k
Using the Object.assign() Method
The Object.assign() method copies properties from a source object to a target object. When used with strings, it treats each character as a property with numeric keys.
Syntax:
Object.assign(target, source)
Example
<!DOCTYPE html>
<html>
<head>
<title>Converting string to an array in JavaScript</title>
<script>
let string = "JavaScript";
let arr = Object.assign([], string);
document.write("Using Object.assign(): " + arr);
</script>
</head>
<body>
</body>
</html>
Using Object.assign(): J,a,v,a,S,c,r,i,p,t
Comparison of Methods
| Method | Best For | Flexibility | Performance |
|---|---|---|---|
split() |
Words, custom delimiters | High | Excellent |
Array.from() |
Characters | Medium | Good |
Spread operator |
Characters | Low | Good |
Object.assign() |
Characters | Low | Fair |
Conclusion
Use split() for maximum flexibility when converting strings to arrays, especially for word separation. For character arrays, the spread operator offers the most concise syntax, while Array.from() provides better readability.
48K+ Views
