Learn JavaScript in Construct, part 3: operators

35

Index

Tagged

Stats

9,818 visits, 24,008 views

Tools

Share

Translations

This tutorial hasn't been translated.

Create a translation

License

This tutorial is licensed under CC BY-NC 4.0. Please refer to the license text if you wish to reuse, share or remix the content contained within this tutorial.

String operators

So far we've mostly covered operators that work on numbers. There are some special uses of operators for strings too.

Strings can be concatenated, i.e. joined together, with +. In this case so long as either the left or right side of the + is a string, it will join strings together. Only when both the left and right side of + are numbers will it do mathematical addition.

// Try entering in to the console:
"Hello " + "world!"  // Hello world!

You can also insert numbers, including variables, this way - so long as one side of the + is a string.

let score = 100;
console.log("Your score is " + score + "!");
// Your score is 100!

Strings using the backtick character ` also have a special feature where you can easily insert other values in to text with ${value}:

let score = 100;
console.log(`Your score is ${score}!`);
// Your score is 100!

These strings are sometimes referred to as template literals or template strings, as it's like a text template being filled in with values at certain points.

These features are useful ways to display values as text, both for logging to the console and displaying information to the user. This guide will also make use of template literals to make it easy to display messages including numbers.

Mixing types

Watch out for a common mistake, which is accidentally mixing types. Notice that with +, if either side is a string, it does string concatenation, which includes converting numbers to a string to join them. Sometimes you can have a string that contains a series of digit characters, so it looks like a number, e.g. "5". However that's still a string, which is a different type to a number! Then if you add something to it, you'll get string concatenation.

// Try entering in to the console:
"5" + "5"	// "55" (string)
"5" + 5		// "55" (string)
5 + "5"		// "55" (string)
5 + 5		// 10 (number)

This can happen in less obvious circumstances, such as if you store a string entered by the user in to a variable, and then add 1 to the variable.

Since this kind of mistake can produce confusing results, it's usually preferable to use template literals instead of + for producing strings, and stick to only using + for mathematical addition with numbers.

Converting between strings and numbers

JavaScript often automatically converts values, such as how string + number will automatically convert number in to a string, and then append it to the first string. Sometimes you want to deliberately convert between types though. For example the user may type a number in to a text input field, which will return a string, but you want to use it as a number instead. It's also often regarded as better programming style to explicitly convert values, rather than relying on implicit language features that convert for you.

There are actually lots of ways to explicitly convert values in JavaScript, but we'll focus on just one for now: using Number() and String() functions. Using Number(string) will convert a string to a number.

// Try entering in to the console:
Number("5")		// 5 (number)
Number("-6.5")	// -6.5 (number)
Number(5)		// 5 (still a number)
Number("Hello")	// NaN

Notice in the last number we got the special Not A Number (NaN) result again. This is because the string "Hello" does not represent a valid number, so we get a special result to indicate this.

Similarly, String() can convert a number to a string.

String(5)		// "5" (string)
String(-6.5)	// "-6.5" (string)
String("Hello")	// "Hello" (still a string)
String(NaN)		// "NaN" (string)

Note that numbers can always be converted to a string. If you convert the special NaN value to a string, you get a string which says "NaN". (This conversion is successful; it's correctly turned a number value in to a corresponding string.)

Also note that in both cases, if you convert a type to the same type, like String("Hello"), it just returns the same value unaltered. This is useful as if you're ever unsure if a value is a string or a number, you can use String(value), and you know the result is definitely a string.

Next Tutorial In Course

Learn JavaScript in Construct, part 4: control flow 18:34

Learn about 'if' statements, loops, and other basics of control flow in JavaScript.

  • 4 Comments

  • Order by
Want to leave a comment? Login or Register an account!