JavaScript: Convert a String to Title Case

Introduction

Title Case is the practice of capitalizing the first letter of each word in a string, while keeping the rest of the letters lowercase. This is commonly used in formatting titles or headings. This program demonstrates how to convert a string to title case in JavaScript, ensuring that each word starts with an uppercase letter, and the rest of the letters remain lowercase.

Problem Statement

Create a JavaScript program that:

• Accepts a string.
• Converts the string to title case by capitalizing the first letter of each word and making all other letters lowercase.
• Returns and displays the result.

Example:

• Input: "hello world"

• Output: "Hello World"

• Input: "javaScript is amazing"

• Output: "Javascript Is Amazing"

Solution Steps

1. Read the Input String: Provide the string either as user input or directly within the code.
2. Convert Each Word to Title Case: Split the string into words, capitalize the first letter of each word, and make the rest of the letters lowercase.
3. Rejoin the Words: Join the modified words back into a single string.
4. Display the Result: Print the title-cased string.

JavaScript Program

// JavaScript Program to Convert a String to Title Case
// Author: https://www.javaguides.net/

function toTitleCase(str) {
    // Step 1: Convert the string to an array of words
    let wordsArray = str.toLowerCase().split(' ');

    // Step 2: Capitalize the first letter of each word
    let titleCasedArray = wordsArray.map(word => {
        return word.charAt(0).toUpperCase() + word.slice(1);
    });

    // Step 3: Join the words back into a single string
    return titleCasedArray.join(' ');
}

// Example input
let inputString = "hello world";
let result = toTitleCase(inputString);
console.log(`Title Case: "${result}"`);

Output

Title Case: "Hello World"

Example with Different Input

let inputString = "javaScript is amazing";
let result = toTitleCase(inputString);
console.log(`Title Case: "${result}"`);

Output:

Title Case: "Javascript Is Amazing"

Explanation

Step 1: Convert the String to an Array

• The toLowerCase() method converts the entire string to lowercase to ensure uniform casing.
• The split(' ') method splits the string into an array of words based on spaces.

Step 2: Capitalize the First Letter of Each Word

• The map() method is used to iterate over the array of words.
• For each word, charAt(0).toUpperCase() capitalizes the first letter, and slice(1) extracts the remaining part of the word.

Step 3: Join the Words

• The join(' ') method concatenates the array of title-cased words back into a single string, with spaces between them.

Step 4: Display the Result

• The result is returned by the function and printed using console.log().

Conclusion

This JavaScript program demonstrates how to convert a string to title case, where the first letter of each word is capitalized and the remaining letters are lowercase. The solution is efficient and can handle strings with multiple words, making it ideal for formatting titles or headings in applications.