Using String.Format in JavaScript?

Question

It drives me crazy. In my opinion, I asked this one and the same question, but I can’t find it anymore (I used Stack Overflow Search, Google Search, manually looked through my messages and looked for my code).

I need something that would be like C # String.Format, where you could do something like

string format = String.Format("Hi {0}",name); 

for JavaScript, of course, and one person gave me a simple answer: it didn’t look like a jQuery plugin or anything else, but I think you did something JSON or something like that, and it worked and was easy to use.

I can’t find this post for my life.

I have this in my code, but I can not find anything that uses it, and I'm sure I used it a couple of times:

 String.prototype.format = function(o) { return this.replace(/{([^{}]*)}/g, function(a, b) { var r = o[b]; return typeof r === 'string' ? r : a; } ); }; 

Answer 1

Adapt the code from the MsAjax String .

Just delete all the _validateParams code and you are most on the way to a full-fledged .NET string class in JavaScript.

Ok, I freed the msajax string class by removing all msajax dependencies. It works just like the .NET string class, including the trim, endsWith / startsWith functions, etc.

PS - I left all the Visual Studio JavaScript IntelliSense and XmlDocs helpers in place. They are harmless if you are not using Visual Studio, but you can remove them if you want.

 <script src="script/string.js" type="text/javascript"></script> <script type="text/javascript"> var a = String.format("Hello {0}!", "world"); alert(a); </script> 

String.js

 // String.js - liberated from MicrosoftAjax.js on 03/28/10 by Sky Sanders // permalink: http://stackoverflow.com/a/2534834/2343 /* Copyright (c) 2009, CodePlex Foundation All rights reserved. Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met: * Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer. * Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution. * Neither the name of CodePlex Foundation nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission. THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS AS IS AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.</textarea> */ (function(window) { $type = String; $type.__typeName = 'String'; $type.__class = true; $prototype = $type.prototype; $prototype.endsWith = function String$endsWith(suffix) { /// <summary>Determines whether the end of this instance matches the specified string.</summary> /// <param name="suffix" type="String">A string to compare to.</param> /// <returns type="Boolean">true if suffix matches the end of this instance; otherwise, false.</returns> return (this.substr(this.length - suffix.length) === suffix); } $prototype.startsWith = function String$startsWith(prefix) { /// <summary >Determines whether the beginning of this instance matches the specified string.</summary> /// <param name="prefix" type="String">The String to compare.</param> /// <returns type="Boolean">true if prefix matches the beginning of this string; otherwise, false.</returns> return (this.substr(0, prefix.length) === prefix); } $prototype.trim = function String$trim() { /// <summary >Removes all leading and trailing white-space characters from the current String object.</summary> /// <returns type="String">The string that remains after all white-space characters are removed from the start and end of the current String object.</returns> return this.replace(/^\s+|\s+$/g, ''); } $prototype.trimEnd = function String$trimEnd() { /// <summary >Removes all trailing white spaces from the current String object.</summary> /// <returns type="String">The string that remains after all white-space characters are removed from the end of the current String object.</returns> return this.replace(/\s+$/, ''); } $prototype.trimStart = function String$trimStart() { /// <summary >Removes all leading white spaces from the current String object.</summary> /// <returns type="String">The string that remains after all white-space characters are removed from the start of the current String object.</returns> return this.replace(/^\s+/, ''); } $type.format = function String$format(format, args) { /// <summary>Replaces the format items in a specified String with the text equivalents of the values of corresponding object instances. The invariant culture will be used to format dates and numbers.</summary> /// <param name="format" type="String">A format string.</param> /// <param name="args" parameterArray="true" mayBeNull="true">The objects to format.</param> /// <returns type="String">A copy of format in which the format items have been replaced by the string equivalent of the corresponding instances of object arguments.</returns> return String._toFormattedString(false, arguments); } $type._toFormattedString = function String$_toFormattedString(useLocale, args) { var result = ''; var format = args[0]; for (var i = 0; ; ) { // Find the next opening or closing brace var open = format.indexOf('{', i); var close = format.indexOf('}', i); if ((open < 0) && (close < 0)) { // Not found: copy the end of the string and break result += format.slice(i); break; } if ((close > 0) && ((close < open) || (open < 0))) { if (format.charAt(close + 1) !== '}') { throw new Error('format stringFormatBraceMismatch'); } result += format.slice(i, close + 1); i = close + 2; continue; } // Copy the string before the brace result += format.slice(i, open); i = open + 1; // Check for double braces (which display as one and are not arguments) if (format.charAt(i) === '{') { result += '{'; i++; continue; } if (close < 0) throw new Error('format stringFormatBraceMismatch'); // Find the closing brace // Get the string between the braces, and split it around the ':' (if any) var brace = format.substring(i, close); var colonIndex = brace.indexOf(':'); var argNumber = parseInt((colonIndex < 0) ? brace : brace.substring(0, colonIndex), 10) + 1; if (isNaN(argNumber)) throw new Error('format stringFormatInvalid'); var argFormat = (colonIndex < 0) ? '' : brace.substring(colonIndex + 1); var arg = args[argNumber]; if (typeof (arg) === "undefined" || arg === null) { arg = ''; } // If it has a toFormattedString method, call it. Otherwise, call toString() if (arg.toFormattedString) { result += arg.toFormattedString(argFormat); } else if (useLocale && arg.localeFormat) { result += arg.localeFormat(argFormat); } else if (arg.format) { result += arg.format(argFormat); } else result += arg.toString(); i = close + 1; } return result; } })(window); 

Answer 2

Here is what I use. I have this function defined in the utility file:

  String.format = function() { var s = arguments[0]; for (var i = 0; i < arguments.length - 1; i++) { var reg = new RegExp("\\{" + i + "\\}", "gm"); s = s.replace(reg, arguments[i + 1]); } return s; } 

And I call it that:

 var greeting = String.format("Hi, {0}", name); 

I don’t remember where I found this, but it was very useful for me. I like it because the syntax is the same as the C # version.

Answer 3

You can do a series of substitutions:

 function format(str) { for(i = 1; i < arguments.length; i++) { str = str.replace('{' + (i - 1) + '}', arguments[i]); } return str; } 

A better approach would be to use the replace function:

 function format(str, obj) { return str.replace(/\{\s*([^}\s]+)\s*\}/g, function(m, p1, offset, string) { return obj[p1] }) } 

This way you can specify both indexes and named parameters:

 var arr = ['0000', '1111', '2222'] arr.a = 'aaaa' str = format(" { 0 } , {1}, { 2}, {a}", arr) // returns 0000 , 1111, 2222, aaaa 

Answer 4

Here is a useful function for formatting strings using regular expressions and captures:

 function format (fmtstr) { var args = Array.prototype.slice.call(arguments, 1); return fmtstr.replace(/\{(\d+)\}/g, function (match, index) { return args[index]; }); } 

Strings can be formatted as C # String.Format:

 var str = format('{0}, {1}!', 'Hello', 'world'); console.log(str); // prints "Hello, world!" 

the format will put the correct variable in the right place, even if they look out of order:

 var str = format('{1}, {0}!', 'Hello', 'world'); console.log(str); // prints "world, Hello!" 

Hope this helps!

Answer 5

Without a third party function:

 string format = "Hi {0}".replace('{0}', name) 

With several options:

 string format = "Hi {0} {1}".replace('{0}', name).replace('{1}', lastname) 

Answer 6

Based on @roydukkey answer a bit more optimized for runtime (it caches regular expressions):

 (function () { if (!String.prototype.format) { var regexes = {}; String.prototype.format = function (parameters) { for (var formatMessage = this, args = arguments, i = args.length; --i >= 0;) formatMessage = formatMessage.replace(regexes[i] || (regexes[i] = RegExp("\\{" + (i) + "\\}", "gm")), args[i]); return formatMessage; }; if (!String.format) { String.format = function (formatMessage, params) { for (var args = arguments, i = args.length; --i;) formatMessage = formatMessage.replace(regexes[i - 1] || (regexes[i - 1] = RegExp("\\{" + (i - 1) + "\\}", "gm")), args[i]); return formatMessage; }; } } })(); 

Answer 7

String.Format from the .NET Framework has several signatures . The one I like more uses

and

 StringHelpers.format("{0}{1}", ["a", "b"]) 

Answer 8

Just execute and use this function:

 function format(str, args) { for (i = 0; i < args.length; i++) str = str.replace("{" + i + "}", args[i]); return str; } 

If you do not want to change the str parameter, then before the for loop clone (duplicate) it on a new line (create a new copy of str ) and install the copy in the for loop and finally return it instead of the parameter itself.

In C # (Sharp), just create a copy by simply calling String.Clone() , but I don’t know how in JavaScript, but you can search on Google or surf the Internet and learn how to do it.

I just gave you an idea of ​​the string format in JavaScript.

Answer 9

Here is a solution that only works with String.prototype:

 String.prototype.format = function() { var s = this; for (var i = 0; i < arguments.length; i++) { var reg = new RegExp("\\{" + i + "\\}", "gm"); s = s.replace(reg, arguments[i]); } return s; } 

Answer 10

Use the template literal in ECMAScript 6:

 var customer = { name: "Foo" } var card = { amount: 7, product: "Bar", unitprice: 42 } var message = `Hello ${customer.name}, want to buy ${card.amount} ${card.product} for a total of ${card.amount * card.unitprice} bucks?` 

Answer 11

Besides modifying the String prototype, there is nothing wrong with the function you provided. The way you use it is as follows:

 "Hello {0},".format(["Bob"]); 

If you want this to be a standalone function, you can change it a bit:

 function format(string, object) { return string.replace(/{([^{}]*)}/g, function(match, group_match) { var data = object[group_match]; return typeof data === 'string' ? data : match; } ); } 

Wittore's method is also good; its function is called with each formatting option passed as an argument, while your expects an object.

In fact, it looks like this: John Resig micro-templating engine .

Answer 12

Your function already takes a JSON object as a parameter:

 string format = "Hi {foo}".replace({ "foo": "bar", "fizz": "buzz" }); 

if you notice the code:

 var r = o[b]; 

looks at your parameter (o) and uses key-value pairs inside it to allow "replace"

Answer 13

Here is a solution that allows you to use both prototypes and functions.

 // -------------------------------------------------------------------- // Add prototype for 'String.format' which is c# equivalent // // String.format("{0} i{2}a night{1}", "This", "mare", "s "); // "{0} i{2}a night{1}".format("This", "mare", "s "); // -------------------------------------------------------------------- if(!String.format) String.format = function(){ for (var i = 0, args = arguments; i < args.length - 1; i++) args[0] = args[0].replace("{" + i + "}", args[i + 1]); return args[0]; }; if(!String.prototype.format && String.format) String.prototype.format = function(){ var args = Array.prototype.slice.call(arguments).reverse(); args.push(this); return String.format.apply(this, args.reverse()) }; 

Enjoy.

Answer 14

I just started porting Java String.format() to JavaScript. Perhaps this will be useful to you too.

It supports basic things like this:

 StringFormat.format("Hi %s, I like %s", ["Rob", "icecream"]); 

The result is

 Hi Rob, I like icecream. 

But also more advanced numeric and date formatting, for example:

 StringFormat.format("Duke Birthday: %1$tA %1$te %1$tB, %1$tY", [new Date("2014-12-16")]); Duke Birthday: Tuesday 16 December, 2014 

See the examples for more details.

See here: https://github.com/RobAu/javascript.string.format

Answer 15

 if (!String.prototype.format) { String.prototype.format = function () { var args = arguments; return this.replace(/{(\d+)}/g, function (match, number) { return typeof args[number] != 'undefined' ? args[number] : match ; }); }; } 

Using:

 '{0}-{1}'.format('a','b'); // Result: 'ab' 

Jsfiddle

Answer 16

Use the sprintf library

Here you have a link where you can find the functions of this library.

Answer 17

Here are my two cents :

 function stringFormat(str) { if (str !== undefined && str !== null) { str = String(str); if (str.trim() !== "") { var args = arguments; return str.replace(/(\{[^}]+\})/g, function(match) { var n = +match.slice(1, -1); if (n >= 0 && n < args.length - 1) { var a = args[n + 1]; return (a !== undefined && a !== null) ? String(a) : ""; } return match; }); } } return ""; } alert(stringFormat("{1}, {0}. You're looking {2} today.", "Dave", "Hello", Math.random() > 0.5 ? "well" : "good")); 

Answer 18

 //Add "format" method to the string class //supports: "Welcome {0}. You are the first person named {0}".format("David"); // and "First Name:{} Last name:{}".format("David","Wazy"); // and "Value:{} size:{0} shape:{1} weight:{}".format(value, size, shape, weight) String.prototype.format = function () { var content = this; for (var i = 0; i < arguments.length; i++) { var target = '{' + i + '}'; content=content.split(target).join(String(arguments[i])) content = content.replace("{}", String(arguments[i])); } return content; } alert("I {} this is what {2} want and {} works for {2}!".format("hope","it","you")) 

With this function, you can mix and match using positional and "named" replacement locations.