Call join() on the array and pass the text you want between its items. For example, words.join(" ") combines a string array into a sentence with spaces between the words.
Join a string array in TypeScript
TypeScript uses string[] or the equivalent Array<string> type for an array of strings. Call join() on the array value:
As an Amazon Associate I earn from qualifying purchases.
const words: string[] = ["TypeScript", "is", "useful"];
const sentence: string = words.join(" ");
console.log(sentence); // TypeScript is usefuljoin() returns a string. It does not change the original array.
Choose the separator for the output
The separator is the argument passed to join(). Use one that suits the format you need:
#1 Best Overall
names.join(", ")producesAda, Grace, Linus.names.join(" and ")producesAda and Grace and Linus.names.join("")producesAdaGraceLinus.
const names: string[] = ["Ada", "Grace", "Linus"];
const commaSeparated = names.join(", ");
const conjunction = names.join(" and ");
const concatenated = names.join("");The separator appears between neighboring items, not before the first item or after the last.
Narrow a string-or-array value before joining
If a value can be either a string or a string array, TypeScript will not let you call an array-only method on the union without first narrowing its type. Use Array.isArray() to distinguish the array case:
function display(value: string | string[]): string {
if (Array.isArray(value)) {
return value.join(" and ");
}
return value;
}Inside the array branch, value is treated as an array, so join() is available. The other branch returns the string unchanged.
Do these 3 things before closing this tab:
1Repair Windows errors before they cause bigger problems2Fix the driver behind crashes, sound loss and screen glitches3Clear out junk files and repair common Windows errorsType the array as strings
Both string[] and Array<string> describe an array whose items are strings:
Rank #3
const first: string[] = ["one", "two"];
const second: Array<string> = ["one", "two"];Either spelling works with join(); choose the style that matches the surrounding code.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
