JavaScript String Format: The Best 3 Ways To Do It

// Using a custom function
function formatString(template, ...values) {
    return template.replace(/{(\d+)}/g, (match, index) => values[index]);
}

const formattedString = formatString("Hello, {0}!, This is {1} ", "World", "JavScript");
console.log(formattedString)
// Output: Hello, World!, This is JavScript 

const amount = 1000;
const options = { style: 'currency', currency: 'USD' }
const formattedAmount = amount.toLocaleString('en-US', options);
console.log(formattedAmount); 
// Output: $1,000.00

Sometimes, you may need to format strings by specifying a fixed width. Here’s an example of how you can format a string with a specific width using the padStart() method:

const text = 'JavaScript';
const formattedText = text.padStart(20, '-');
console.log(formattedText);
//Output: ----------JavaScript

const today = new Date();
const formattedDate = today.toLocaleDateString('en-US');
console.log(formattedDate); 
// 6/15/2023

const number = 12;
const formattedNumber = number.toString().padStart(5, '0');
console.log(formattedNumber); 
// Output: 00012

Sometimes you may need to remove letters from a string and keep only the numeric characters. Here is an example using regular expression:

const text = 'A1B2C3';
const numbersOnly = text.replace(/\D/g, '');
console.log(numbersOnly); 
// Output: 123

If you need to format a hexadecimal number in uppercase, JavaScript provides the toUpperCase() method. Here’s an example:

const hexNumber = 'a1b2c3';
const formattedHex = hexNumber.toUpperCase();
console.log(formattedHex); 
// Output: A1B2C3

To format numbers with a specific number of decimal places, you can use the JavaScipt toFixed() method. Here’s an example:

const number = 3.14159;
const formattedNumber = number.toFixed(2);
console.log(formattedNumber); 
// Output: 3.14

const percentage = 0.75;
const formattedPercentage = (percentage * 100).toFixed(2) + '%';
console.log(formattedPercentage); 
// Output: 75.00%

JavaScript provides the toString() method to achieve this. Here’s an example:

const value = true;
const formattedValue = value.toString();
console.log(formattedValue);
// Output: "true"

// Format boolen to Yes or No
console.log(value ? 'Yes' : 'No');
// Output: "Yes"

There are several JavaScript libraries available that provide advanced string formatting options. One popular library is sprintf-js, which implements the 'sprintf' function from other programming languages.

You can include the library in your project and utilize its powerful formatting capabilities.

Use String.prototype.padStart() or String.prototype.padEnd() methods.

const originalString = "42";
const paddedString = originalString.padStart(5, '0'); 
console.log(paddedString)
// Output: "00042"