String.format in JavaScript

In this tutorial, I show you how to format string in JavaScript. There is no direct equivalent method like string.format in JavaScript similar to C# but the same can be achieved by creating the string prototype method.

string.format in JavaScript

Suppose we have one string where {0} and {1} placeholders need to be replaced with some string literals like below example –

Example 1:

“This is the best site for learning {0}{1}”

Expected Output:

“This is the best site for learning Javascript”

Then how to do this, As I said earlier there is no direct string.format() method exists so here I have created one prototype method for string type object. This code snippet is working in all browsers like IE11, Chrome, Firefox, and Chromium.

String.prototype.formatString = String.prototype.formatString ||
function () {
var str = this.toString();
if (arguments.length) {
 var t = typeof arguments[0];
 var key;
 var args = ("string" === t || "number" === t) ?
Array.prototype.slice.call(arguments): arguments[0];
for (key in args) {
 str = str.replace(new RegExp("\\{" + key + "\\}", "gi"), args[key]);
}
}
return str;
};

Point to remember while using string.format in Javascript

If you don’t pass any argument in this “formatString” prototype method then it will return the same string as a result.

Example :

"This is the best site for learning {0}{1}".formatString();

Output:

This is the best site for learning {0}{1}

If you missed any argument then the result will display as below –

Example :

"This is the best site for learning {0}{1}".formatString("Java");

Output :

This is the best site for learning Java{1}

Alternate of format string prototype method in JavaScript

You can use multiple replace methods as per the number of different arguments. In the below example I have used two replace methods because there are 2 arguments “{0},{1}”. Although the expected output is the same using replace method but below approach is not reusable. If you want to do it in multiple places so format string approach is the best practice to achieve the string formatting in JavaScript.

var strtext="This is best site for learning {0} {1}";
var result = strtext.replace(new RegExp("\\{0\\}", "gi"),"Java").replace(new RegExp("\\{1\\}", "gi"),"script");
console.log(result);

Output:
This is the best site for learning Java script

Complete Working Code of format string prototype method

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript String Format like in C#</h2>
<p>The formatString will replace all placeholder with your choice value:</p>
<p id="demo"></p>
<script>
String.prototype.formatString = String.prototype.formatString ||function () {
var str = this.toString();
if (arguments.length) {
var t = typeof arguments[0];
var key;
var args = ("string" === t || "number" === t) ?
Array.prototype.slice.call(arguments)
: arguments[0];
for (key in args) {
str = str.replace(new RegExp("\\{" + key + "\\}", "gi"), args[key]);
}
}
return str;
};
document.getElementById("demo").innerHTML = "This is best site for learning {0}{1}".formatString("Java","script");
</script>
</body>
</html>

format string in JavaScript

Conclusion

Writing a string prototype is the best way if you want to make it reusable. But if you want to use format string in one place so use replace method of JavaScript. this how you can achieve a similar string.format in JavaScript.