How to Convert Typescript Array to String With Separator?

In this typescript tutorial, we will see how to convert an array to a string with a separator in typescript using different methods. Here are the methods we are going to cover:

• Using Join ()
• Using for loop
• Using the reduce()
• Using toString() Method
• Using the map() and join ()

Convert a TypeScript array to a String With a Separator using Join()

Here we will see how to convert an array to a string with a separator, using join() in TypeScript.

The join method in TypeScript is used to join all the items of an array into a string.

Syntax

arr.join(separator)

• separator: The string you want to insert between each array element. If you don’t specify one, it defaults to a comma ,.

For example, we have an array of names, and by using the join() method, we will convert the array into a string in TypeScript.

Below is the complete code:

const names = ['Alex', 'Ron', 'James'];
const separator = ',';

const result = names.join(separator);
console.log(result);

To compile the code and run the below command, you can see the result in the console:

ts-node convertArrayToString.ts

This is an example of how to convert an array to a string in TypeScript using join().

Let me show you a few examples of using the join() method to convert a TypeScript Array to a string with a separator.

Check out Check If Object Is Empty in TypeScript

Example 1: Comma-Separated List

Let’s say I have an array of US states:

const states = ["California", "Texas", "New York", "Florida"];
const result = states.join(", ");
console.log(result);
// Output: California, Texas, New York, Florida

This is perfect for displaying lists, generating CSV lines, or sending readable data.

Example 2: Custom Separator

Suppose you want to use a pipe (|) as a separator:

const productSKUs = ["SKU123", "SKU456", "SKU789"];
const skuString = productSKUs.join(" | ");
console.log(skuString);
// Output: SKU123 | SKU456 | SKU789

Example 3: No Separator

If you call join() with an empty string, the array elements are concatenated directly:

const zipCodes = ["90210", "10001", "33101"];
const zipString = zipCodes.join("");
console.log(zipString);
// Output: 902101000133101

Read How to Convert Number to Boolean in TypeScript

Convert a TypeScript array to a String With a Separator using a for loop()

Here we will see how to convert an array to a string with a separator, using a for loop in TypeScript.

With a for loop, a certain section of code can be run a predefined number of times.

For example, we declare an array of names, and then we will use a for loop to iterate over the array, concatenate each element with the help of a separator, and create a new string.

In the convertArrayToString.ts file, write the following code:

const names = ['Alex', 'Ron', 'James'];
const separator = ',';
let result = '';

for (let i = 0; i < names.length; i++) {
  result += names[i];
  if (i !== names.length - 1) {
    result += separator;
  }
}
console.log(result);

To compile the code and run the below command, you can see the result in the console:

ts-node convertArrayToString.ts

This is how we can convert an array to a string with a separator using a for loop in TypeScript.

Check out Format Numbers with Commas in TypeScript

Convert a TypeScript array to a String With a Separator using reduce()

Here we will see how to convert an array to a string with a separator, using reduce() in TypeScript.

To reduce an array to a single value, the reduce() method concurrently applies a function to two items in the array (from left to right).

Syntax:

array.reduce(callback[, initialValue]);

For example, we declare an array of names, and then we use the reduce() method to apply a function to each item in the array. This reduces the array to a single value. Here, the function concatenates each item in the array with a separator string, creating a new string.

In the convertArrayToString.ts file, write the below code:

const names = ['Alex', 'Ron', 'James'];
const separator = ',';

const result = names.reduce((prev, curr) => prev + separator + curr); 
console.log(result); 

To compile the code and run the below command, and you can see the result in the console:

ts-node convertArrayToString.ts

This is an example of converting an array to a string with a separator using reduce() in TypeScript.

Check out Format Currency to 2 Decimals in TypeScript

TypeScript: Convert an Array to String with Separator using toString() Method

Another way to convert an array to a string is with the toString() method. However, this method always separates elements with a comma, and you can’t customize the separator.

Here is an example.

const cities = ["Los Angeles", "Chicago", "Houston"];
const cityString = cities.toString();
console.log(cityString);
// Output: Los Angeles,Chicago,Houston

Tip: If you need a custom separator, stick with join().

Read Convert Number to String with Leading Zeros in TypeScript

Convert a TypeScript array to a String With a Separator using the map() and join()

Here we will see how to convert an array to a string with a separator, using the map() and join() in TypeScript.

A new array can be created using the TypeScript function arr.map() by calling a specified function on each item of the existing array.

arr.map(callback[, thisObject])

The join method in TypeScript is used to join all the items of an array into a string.

arr.join(separator)

For example, we declare an array of names, and then we will use map(), which returns a new array with the same items as the original array. By using the join method on the new array, to convert it to a string with the separator between each item.

In the convertArrayToString.ts file, write the following code:

const names = ['Alex', 'Ron', 'James'];
const separator = ',';

const result = names.map((item) => item).join(separator); 
console.log(result);

To compile the code and run the below command, you can see the result in the console:

ts-node convertArrayToString.ts

This is an example to convert an array to a string with a separator using the map() and join() in TypeScript.

Conclusion

In this tutorial, we saw how to convert an array to a string with a separator in TypeScript using different methods. The different methods are

• Using Join ()
• Using for loop
• Using the reduce()
• Using the map() and join ()

You may also like the following tutorials:

• Round Down to 2 Decimals in TypeScript
• How to Round to 2 Decimals in TypeScript?
• Typescript Split String
• Merge Enums in TypeScript with Different Values