Javascript array objects to string

Array.prototype.toString()

The toString() method returns a string representing the specified array and its elements.

Try it

Syntax

Return value

A string representing the elements of the array.

Description

The Array object overrides the toString method of Object . The toString method of arrays calls join() internally, which joins the array and returns one string containing each array element separated by commas. If the join method is unavailable or is not a function, Object.prototype.toString is used instead, returning [object Array] .

const arr = []; arr.join = 1; // re-assign `join` with a non-function console.log(arr.toString()); // [object Array] console.log(Array.prototype.toString.call( join: () => 1 >)); // 1 

JavaScript calls the toString method automatically when an array is to be represented as a text value or when an array is referred to in a string concatenation.

Array.prototype.toString recursively converts each element, including other arrays, to strings. Because the string returned by Array.prototype.toString does not have delimiters, nested arrays look like they are flattened.

const matrix = [ [1, 2, 3], [4, 5, 6], [7, 8, 9], ]; console.log(matrix.toString()); // 1,2,3,4,5,6,7,8,9 

When an array is cyclic (it contains an element that is itself), browsers avoid infinite recursion by ignoring the cyclic reference.

const arr = []; arr.push(1, [3, arr, 4], 2); console.log(arr.toString()); // 1,3,,4,2 

Examples

Using toString()

const array1 = [1, 2, "a", "1a"]; console.log(array1.toString()); // "1,2,a,1a" 

Using toString() on sparse arrays

Following the behavior of join() , toString() treats empty slots the same as undefined and produces an extra separator:

Calling toString() on non-array objects

toString() is generic. It expects this to have a join() method; or, failing that, uses Object.prototype.toString() instead.

.log(Array.prototype.toString.call( join: () => 1 >)); // 1; a number console.log(Array.prototype.toString.call( join: () => undefined >)); // undefined console.log(Array.prototype.toString.call( join: "not function" >)); // "[object Object]" 

Specifications

Browser compatibility

BCD tables only load in the browser

See also

Found a content problem with this page?

This page was last modified on Jun 15, 2023 by MDN contributors.

Your blueprint for a better internet.

Источник

Convert a JavaScript array to string

There will be times when you need to convert an array of values into a single string in JavaScript.

This article will help you learn the easy ways you can convert an array to string in JavaScript:

1. Using the toString() method

To easiest way to convert a JavaScript array to string is to use the built-in Array method called toString() .

This method will return a string that represents the elements stored in your array as follows:

The toString() method is able to convert an array of strings into a single string as well:

2. Convert an array of objects to string with JSON.stringify()

But keep in mind that the toString() method can’t be used to convert an array of objects.

when you call the toString() method on an array of objects, it will return [object Object] instead of the actual values:

To convert an array of objects into a string, you need to use the JSON.stringify method as shown below:

It’s not really a representation of the array values because the return value will still have the square and curly brackets.

Still, this is the best way you can convert an array of objects to a string in JavaScript.

3. Convert JavaScript array to string with join()

Sometimes, you want to convert an array into a string without commas.

Since the toString() method can’t do this, you need to use join() method instead.

The join() method is a built-in method of the Array class used to join array elements as one string.

This method accepts one string parameter which will serve as the separator of the returned output.

Here are some examples of using the join() method to convert an array to a string:

As you can see, you can specify an empty string to get a string without commas.

4. Convert a nested array to a string in JavaScript

You can convert a nested array into a string in JavaScript using the toString() method.

The toString() method will flatten your array so that all elements will be joined as a single string:

As you can see, the child array that contains [«James», «Nathan»] is flattened and put into a single string by the toString() method.

5. Convert a string back into an array

When you need to convert a JavaScript string into an array, you can use a built-in String method called split() .

As the name implies, the split() method is used to split a JavaScript string into an array.

You can pass a separator as an argument of split() to let JavaScript know what character is used to split the string.

As you can see, converting a string into an array is very easy in JavaScript.

If you want to learn more about the split() method, check out my other article on How to split a string into array in JavaScript.

Conclusion

As you can see from the examples in this article, there are multiple ways you can convert a JavaScript array to a string.

It all depends on your needs and preferences. Sometimes you need to convert an array of objects. Other times you might want to use other than a comma as your string separator.

You can also convert a string back to an array using the split() method.

I hope this article was helpful. See you in other articles! 👍

Learn JavaScript for Beginners 🔥

Get the JS Basics Handbook, understand how JavaScript works and be a confident software developer.

A practical and fun way to learn JavaScript and build an application using Node.js.

About

Hello! This website is dedicated to help you learn tech and data science skills with its step-by-step, beginner-friendly tutorials.
Learn statistics, JavaScript and other programming languages using clear examples written for people.

Search

Type the keyword below and hit enter

Tags

Click to see all tutorials tagged with:

Источник

Array to String in JavaScript

JavaScript’s toString() method operates on a given object, returning its text representation as a string.

Applying the toString() method to an array returns the values in the array as a string.

Converting an Array to a String

Let’s look at three examples of converting an array to a string:

Converting an array of numbers

const numArray = [6, 5, 4]; numArray.toString(); // expected output: 6,5,4

As we can see above, each element is converted to a string, separated with commas, then returned to the user as a single string.

Note: the square brackets we used to define the array are gone! JavaScript removes them when it stringifies the content.

Converting an array of strings

const strArray= ['a', 'b', 'c']; strArray.toString(); // expected output: a,b,c

The above code concatenates all of the strings in the array together into a single comma-delimited string, representing the values in the array.

Converting mix arrays (both numbers and strings)

const mixArray = ['5', 32, 'Daniel']; mixArray.toString(); // expected output: 5,32,Daniel

This code takes a mixed array and returns the comma-delimited string representation, converting each data type in turn into a string.

Converting a String back to an Array

In the above code samples, the returned strings have all of the array values separated by commas. We can use the split() method to recreate the array. Simply pass the “ , ” character as an argument to the split() method, and JavaScript will create an array based on the contents:

const str = mixArray.toString(); const backToArr = str.split(','); console.log('backToArr: ', backToArr); // expected output: ["5", "32", "Daniel"]

The above code takes our comma-delimited string from the last example (“5,32,Daniel”), and converts it back into an array.

Note: This method will always yield a string as the data type. In the original example, const mixArray contained the value 32 as an integer. After converting this array to a string and back, the value “32” now has a type string. Keep this in mind when working with your arrays – JavaScript can’t always tell what an object’s type is supposed to be when looking at string representations.

If we do not pass a delimiter character to the split() method, the method will return a single value – the string that was provided as input. See the behavior in the code example below:

const str = mixArray.toString(); const backToArr = str.split(); console.log('backToArr: ', backToArr); // expected output: backToArr: ["5,32,Daniel"]

You can see some more examples where the split() method is applied here.

Working with Nested Arrays

Nested arrays are handled in an interesting way in JavaScript. Take the following example code, which includes an array with nested array elements:

const arrInArr = [ '5', 32, [ 'Daniel', 4 ] ]; arrInArr.toString(); // expected output: 5,32,Daniel,4

When toString() is called on the array, the array object is flattened. Flattened arrays consist of an array that contains all of the elements of the original array, coupled with all of the elements of the nested array, combined to appear as a single array. The toString() method then simply separates all elements with a comma.

This behavior changes when working with objects. If we have an array that has a nested object, as defined in the following example, the resulting string value will contain [object Object]:

const objInArr = ['5', 32, < name: 'Ariel', age: 40 >]; objInArr.toString() ; // expected output: 5,32,[object Object]

This happens because of the underlying object types. Although array is of type Object, it has the capability to produce a meaningful result when applying the toString() method. Plain objects, like the one included in our array above, do not have this behavior by default – we would need to add it in ourselves.

To learn more about the toString() method and its behavior with objects, check out this link.

Related Links:

Источник