DisplayConcatString: A Simple String Concatenation Utility for TypeScript

String manipulation is a common task in web development, especially when dealing with arrays of strings that need to be displayed to users. Whether you're showing tags, categories, or any list of items, you often need to convert an array into a readable string format. That's where DisplayConcatString comes in—a simple, lightweight utility that makes string concatenation clean and efficient.

Why DisplayConcatString?

• Simple API: One function that does exactly what you need—concatenate strings with a separator
• Null Safety: Automatically filters out null/undefined values
• Customizable Separators: Choose your own separator or use the default comma and space
• TypeScript Support: Full type safety with TypeScript
• Lightweight: Minimal bundle size with no dependencies

Installation

# With bun
bun add @Herrlich-Digital/DisplayConcatString
 
# With npm
npm install @Herrlich-Digital/DisplayConcatString
 
# With yarn
yarn add @Herrlich-Digital/DisplayConcatString

Basic Usage

The DisplayConcatString package provides a simple function for concatenating arrays of strings:

import { displayString } from "@Herrlich-Digital/DisplayConcatString";
 
// Basic usage with default separator
const tags = ["JavaScript", "TypeScript", "React"];
const result = await displayString(tags);
console.log(result); // "JavaScript, TypeScript, React"
 
// Custom separator
const categories = ["Frontend", "Backend", "DevOps"];
const result2 = await displayString(categories, " | ");
console.log(result2); // "Frontend | Backend | DevOps"

Handling Null Values

One of the key features of DisplayConcatString is its ability to handle arrays with null or undefined values:

import { displayString } from "@Herrlich-Digital/DisplayConcatString";
 
const mixedArray = ["JavaScript", null, "React", undefined, "TypeScript"];
const result = await displayString(mixedArray);
console.log(result); // "JavaScript, React, TypeScript"

Real-World Examples

Displaying User Tags

import { displayString } from "@Herrlich-Digital/DisplayConcatString";
 
const userProfile = {
  name: "John Doe",
  skills: ["JavaScript", "React", "Node.js", "TypeScript"],
  interests: ["Web Development", "Open Source", "AI"],
};
 
// Display skills
const skillsDisplay = await displayString(userProfile.skills);
// "JavaScript, React, Node.js, TypeScript"
 
// Display interests with custom separator
const interestsDisplay = await displayString(userProfile.interests, " • ");
// "Web Development • Open Source • AI"

Building Search Queries

import { displayString } from "@Herrlich-Digital/DisplayConcatString";
 
const searchTerms = ["react", "typescript", "tutorial"];
const query = await displayString(searchTerms, " AND ");
// "react AND typescript AND tutorial"

Creating Breadcrumbs

import { displayString } from "@Herrlich-Digital/DisplayConcatString";
 
const breadcrumbItems = ["Home", "Blog", "JavaScript", "React"];
const breadcrumb = await displayString(breadcrumbItems, " > ");
// "Home > Blog > JavaScript > React"

API Reference

displayString(array: string[], separator?: string): Promise<string>

Parameters:

• array: An array of strings to concatenate
• separator (optional): The separator to use between strings. Defaults to ", "

Returns:

• A promise that resolves to the concatenated string

Features:

• Automatically filters out null and undefined values
• Handles empty arrays gracefully
• Returns an empty string for empty or null arrays

Why Not Just Use join()?

While JavaScript's built-in Array.join() method is powerful, DisplayConcatString provides several advantages:

1. Null Safety: Automatically filters out null/undefined values
2. Async Support: Returns a promise, making it consistent with modern async patterns
3. Semantic Naming: The function name clearly indicates its purpose
4. TypeScript Integration: Better type safety and IntelliSense support

Comparison with Native JavaScript

// Native JavaScript approach
const tags = ["JavaScript", null, "React", undefined, "TypeScript"];
const nativeResult = tags
  .filter((tag) => tag !== null && tag !== undefined)
  .join(", ");
 
// With DisplayConcatString
import { displayString } from "@Herrlich-Digital/DisplayConcatString";
const displayResult = await displayString(tags);

Contributing

The DisplayConcatString package is open source and welcomes contributions! You can find the repository at GitHub.

Conclusion

DisplayConcatString is a simple yet powerful utility that solves a common problem in web development. Whether you're building user interfaces, processing data, or creating readable output, this package provides a clean and efficient way to handle string concatenation with built-in null safety.

The package follows the same philosophy as my other utilities—simple, focused, and reliable. It's designed to do one thing well and integrate seamlessly into your existing TypeScript projects.

Give it a try in your next project, and you'll see how a small utility can make a big difference in code readability and maintainability.