Resources, Advice & Tips for Covid-19
Read More

Javascript Sprintf

Javascript Sprintf

Javascript sprintf is a very useful bit of javascript code whenever you need to parse and display some value or data. Like most code, there are many ways to implement it, from the simplest to the most complex.

Sprintf and Printf

"Sprintf" is actually a bastardization of a term from C++ programming known as printf. This performed a rather simple yet necessary function: it would print out a string (or series of characters) to some output. The simplest example of an implementation of a printf function would be:

printf("this is an example of the printf function");

This would print, "this is an example of the printf function" across the screen.

Getting Fancy with Operators and Arguments

Of course, computers aren't used mainly to display characters - that's what typewriters are for. Computers are designed to operate on data before it is displayed, and that's where the real power of the printf function came out. Using the "%" symbol to denote where the functions and the "flags" of operations were supposed to happen, programmers could use the printf function to manipulate and format data in all sorts of ways. Some illustrations of the power of the printf function are as follows:

  • printf ("These are Decimals: %d %ld\n", 1234, 340ZX); will produce These are Decimals: 1234 340 - only decimals, no letters.
  • printf ("Here are ten spaces followed by a great year: %10d \n", 1969); will produce Here are ten spaces followed by a great year: 1969
  • printf ("Look! Radixes!: %d %x %o \n", 100, 100, 100); will produce Look! Radixes!: 100 64 144, performing mathematical computations on the number 100.

It is obvious that what happens with the characters depends on the letter that follows the "%" symbol. These manipulations are well documented all over the web in places such as C++ reference sites.

This is Supposed to Be Javascript Sprintf!

Since sprintf is based on printf, having an understanding of the latter can make it that much easier to understand the former. For example, a basic javascript sprintf function can be found at Jan Moesen's page. You don't even have to do more than hit "execute" to have the sprintf work:



Input...... '30' -> decimal: %d / bin = %b / oct = %o / hex = %x / HEX = %X

Output.... '30' -> decimal: 30 / bin = 11110 / oct = 36 / hex = 1e / HEX = 1E

However, unless you already have some familiarity with what these numbers and letters mean, it won't help you much with including sprintf in your own javascript coding.

Other Javascript Resources for Sprintf

Much more clear and novice-coder-friendly examples of sprintf are in places like the WebToolKit. It explains concepts of the various operations that can be done with the "%" sign (including how to print a literal "%" within a sprintf command, which is done by simply including two percent symbols together: "%%"). Other methods of manipulating data include:

  • Using "-" to left justify the variable
  • Using "+" to include a + or - symbol in front of numbers (usually positive numbers have no sign)
  • Placing a number (0-9) between % and the letter specifies the minimum with of the variable

This is followed by a complete segment of source code that you can include in your HEAD or in an external .JS file that your web page links to. Google's code repository also contains a fairly well-explained example of a sprintf function. This one actually includes a rather fun feature called "argument swapping" which can sort through a list of characters without the need to place them in a specific order.

While it requires a more advanced level of javascript knowledge than a simple counter or rollover, understanding the sprintf concepts can strengthen your coding skills to the next level.

Was this page useful?
Javascript Sprintf