How To Convert A String To The Title Case In JavaScript

Convert a String to Title Case in JavaScript

Converting a String to the title case is not difficult, but it can not be easy with beginners. We will help you to solve this problem. Here are some ways can convert a String to the title case in JavaScript. Let’s learn about it with the explanation and examples below.

What is a string in JavaScript?

Like many programming languages, String is the most important type in JavaScript. A string is a sequence of characters. Strings in JavaScript are surrounded by either single quotation marks, double quotation marks, grave accents, or String objects in JavaScript.

Look at the example below to know more about it.

// create a string named 'str1' with single quotation marks.
let str1 = 'Hello everyone. This guide will help convert a String to the title case in JavaScript.'

// create a string named 'str1' with single quotation marks.
let str2 =" I am crvt4722."

// create a string named 'str3' with object String.
let str3 = new String(" Date: 11/09/2022.")

// create a string named ‘str4’ with grave accents.
let str4 = `Title: Convert A String To Title Case In JavaScript.`

console.log(str1)
console.log(str2)
console.log(str3)
console.log(str4)

Output 

Hello everyone. This guide will help convert a String to the title case in JavaScript.
I am crvt4722.
String {' Date: 11/09/2022.'}
Title: Convert A String To Title Case In JavaScript.

How to Convert A String To The Title Case In JavaScript

Solution 1: Using the loop

Look at the example below to know more about this solution.

function titleCase(s) {
  // create a string array by splitting a string named 's' with separator whitespace.
  arr = s.toLowerCase().split(' ');

  for (var i = 0; i < arr.length; i++) {
    arr[i] = arr[i].charAt(0).toUpperCase() + arr[i].slice(1); 
  }

  return arr.join(' ');
}

// create a string that is needed to convert named 's'
let s = 'convert a string to the title case in javaScript.'
console.log(titleCase(s))

Output

Convert A String To The Title Case In Javascript.

Solution 2: Using replace() function

Syntax

str.replace(oldValue,newValue)

Parameters

  • str: The contents of the file you read before.
  • oldValue: The String you want to change.
  • newValue: The String you want to replace with.

Return Value

A new string is replaced.

If you want to dig deep into this method, see here.

Look at the example below to know more about this solution.

function titleCase (s) {
   // convert s to type String.
   s = s.toString(); 

 return s.replace(/\w\S*/g, 
    function(data){
         return data.charAt(0).toUpperCase() + data.substr(1).toLowerCase();
    });
}

// create a string that is needed to convert named 's'
let s = 'convert a string to the title case in javaScript.'
console.log(titleCase(s))

Output

Convert A String To The Title Case In Javascript.

Solution 3: Using map() method

Syntax

arr.map(function(currentValue, index, arr), thisValue)

Parameters

  • arr: An array 
  • function(): Required. it runs on each element of the array.
  • currentValue: The value of the current element.
  • index: It holds the index of the current element.
  • arr: The array of the current element.
  • thisValue: Optional. It holds the value of passed to the function

Return Value

A new array.

If you want to dig deep into this method, see here.

Look at the example to know more about this solution.

function titleCase(s) {
  return s.toLowerCase().split(' ').map(function(data) {
    return (data.charAt(0).toUpperCase() + data.slice(1));
  }).join(' ');
}

// create a string that is needed to convert named 's'
let s = 'convert a string to the title case in javaScript.'
console.log(titleCase(s))

Output

Convert A String To The Title Case In Javascript.

Summary

These are some solutions that can help you convert a string to the title case in JavaScript. To solve this problem, you can use the for loop, replace() function, or map() method. Choose the solution that is the most suitable for you. We hope this tutorial is helpful to you. Have an exciting learning experience. Thanks!

Maybe you are interested:

Leave a Reply

Your email address will not be published. Required fields are marked *