Adding thousand separators

string_thousands

Often, games and applications may display numbers. Sometimes, large numbers. In some cases, numbers with so many digits that you aren't even sure about most suitable notation.

And that's where use of thousand separators is handy. Since delimiter symbols (normally commas) appear in fewer quantity than digits, they are easier to count, and user can tell the order of magnitude easier.

This post covers detail of doing that, both in algorithm and code.

To mention, a thought about making this post came to me after linking someone to string_thousands GameMaker function/script by Andrew McCluskey.
Code is decent, and performance is not really a concern, but what bothered me - is that the simplest this function can get?

So let's speak about the approach first.


The simplest approach possible is also the obvious one - to add a comma between every three digits, starting from the end. Literally? Literally:

string_thousands

Pseudocode for that activity would be around:

Here, `string` is an input string with indexes starting at 0.
let i = (length of string) - 3
while i > 0 do
	insert a "," into string at position (i)
	let i = i - 3
return string

Actual code would remain comparatively simple. For example, in GameMaker strings have character indexes starting at 1, but there's a convenient string_insert method included:

/// string_thousands(integer)
var r, i;
r = string(argument0)
for (i = string_length(r) - 2; i > 1; i -= 3) {
    r = string_insert(",", r, i)
}
return r

JavaScript, on other hand (and most other programming languages), doesn't have a built-in method for inserting sub-strings into strings, but that's easy enough to replicate anyway:

function string_thousands(v) {
	var r, i;
	r = "" + v;
	for (i = r.length - 3; i > 0; i -= 3) {
		r = r.substr(0, i) + "," + r.substr(i);
	}
	return r;
}

And, of course, what makes it for a good post if not a small interactive demo:

Alas! Your browser does not seem to support HTML5 Canvas.

(use the slider to adjust the value logarithmically)

I hope that this was cool enough.

Related posts:

6 thoughts on “Adding thousand separators

  1. Pingback: Hosting HTML5 games on Google Drive

  2. Hi im trying to learn more about scores would love to see a tutorial and or example file on just how to do this and other things like add zeros in my score. Im very new to score strings so a step by step would be awesome. Thanks

    • To add zeroes to the score, you could make a script like

      /// string_lzpad(str, len)
      var s = string(argument0);
      return string_repeat("0", argument1 - string_length(s)) + s;

      and call it when drawing the score,

      draw_text(10, 10, string_lzpad(score, 9));

      (to draw a 9-digit score at position 10, 10)
      Combining it with the script from this post would be

      draw_text(10, 10, string_thousands(string_lzpad(score, 9)));

      the process of importing scripts is explained in the manual. In examples shown on this blog, script’ name is always denoted on it’s first line in a comment.

        • A BIG THANKS Vadim your a absolute legend i now know how to do zeros before score and commas in score thanks very much for your teaching.

          Something i couldnt get working though is to have my score go over 10 zeros once my score gets to 10 zeros it starts to take away from the score but i can see in your html5 slider that you can get the score to 13 zeros so im not sure what im doing wrong then with going past 10 zeros.

          Thanks again

Leave a Reply

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