How to Convert an Array to a String in TypeScript?

As a Typescript developer, you will get requirements such as converting an array to a string. There are various methods to achieve this. In this tutorial, I will explain how to convert an array to a string in TypeScript.

Table of Contents

Convert an Array to a String in TypeScript

Let’s say you’re building a web application for a restaurant in New York City. You have an array of menu items, and you want to display them as a comma-separated string on the menu page. Here’s an example:

const menuItems: string[] = ['New York-style Pizza', 'Buffalo Wings', 'Caesar Salad', 'Cheesecake'];

To convert this array to a string, we can use one of the following methods:

Method 1: Using the toString() Method

The simplest way to convert an array to a string in TypeScript is by using the built-in toString() method. This method returns a string representation of the array and its elements. Here’s an example:

const menuItems: string[] = ['New York-style Pizza', 'Buffalo Wings', 'Caesar Salad', 'Cheesecake'];
const menuItemsString: string = menuItems.toString();
console.log(menuItemsString);
// Output: "New York-style Pizza,Buffalo Wings,Caesar Salad,Cheesecake"

The toString() method joins the array elements using commas as the default separator. It’s a straightforward approach when you don’t need any customization.

Here is the exact output in the screenshot below:

Convert an Array to a String in TypeScript

Read How to Convert a Map to an Array in TypeScript?

Method 2: Using the join() Method

If you want more control over the separator between the array elements, you can use the join() method. This method allows you to specify a custom separator string. Let’s modify our previous example:

const menuItems: string[] = ['New York-style Pizza', 'Buffalo Wings', 'Caesar Salad', 'Cheesecake'];
const menuItemsString: string = menuItems.join(', ');
console.log(menuItemsString);
// Output: "New York-style Pizza, Buffalo Wings, Caesar Salad, Cheesecake"

By passing ', ' as the argument to the join() method, we get a comma-separated string with spaces between the elements. This enhances the readability of the resulting string.

I executed the above Typescript code using VS code and you can see the exact output in the screenshot below:

Method 3: Using a Custom Separator

The join() method is highly flexible, allowing you to use any custom separator you desire. For instance, let’s say you want to create a hashtag string for social media promotion. You can use the join() method with a '#' separator:

const menuItems: string[] = ['New York-style Pizza', 'Buffalo Wings', 'Caesar Salad', 'Cheesecake'];
const hashtagString: string = menuItems.join('#');
console.log(hashtagString);
// Output: "New York-style Pizza#Buffalo Wings#Caesar Salad#Cheesecake"

This creates a string where each menu item is preceded by a hashtag, making it suitable for social media platforms like Twitter or Instagram.

Read Create a Map from an Array in TypeScript

Handle Empty Arrays

When working with arrays, it’s important to consider edge cases, such as empty arrays. Let’s see how the toString() and join() methods behave with an empty array:

const emptyArray: string[] = [];
console.log(emptyArray.toString());
// Output: ""
console.log(emptyArray.join(', '));
// Output: ""

Both methods return an empty string when called on an empty array. This behavior is consistent and predictable.

Convert an Array to a String in TypeScript Example

Let me show you now a real example. Imagine you’re developing a feature for a travel website that allows users to plan their itinerary for a trip to Los Angeles. You have an array of places they want to visit:

const itinerary: string[] = ['Hollywood Walk of Fame', 'Griffith Observatory', 'Santa Monica Pier', 'The Getty Center'];

To display the itinerary as a readable string, you can use the join() method with appropriate separators:

const itineraryString: string = itinerary.join(' → ');
console.log(itineraryString);
// Output: "Hollywood Walk of Fame → Griffith Observatory → Santa Monica Pier → The Getty Center"

Using the ' → ' separator creates an arrow-like representation of the itinerary, indicating the order of the places to visit.

Performance Considerations

When dealing with large arrays, performance becomes a crucial factor. Both the toString() and join() methods have similar performance characteristics. However, if you’re working with extremely large arrays and performance is a bottleneck, you might consider alternative approaches like building the string manually using a loop.

Conclusion

In this tutorial, I explained how to convert an array to a string in Typescript using various methods. The toString() method offers a quick and simple way to convert an array to a comma-separated string, while the join() method allows for more customization by specifying a separator.