// step 1
var one = "1" + "2" + "3"; // string value "123"
// step 2
var two = parseInt(one); // integer value 123
// step 3
var three = 123 + 100; // integer value 223
// step 4
var four = three.toString(); // string value "223"
The join method concatenates the items of an array into a string, putting the specified delimiter between items. In this case, the "delimiter" is an empty string ("").
Step (2) Convert "123" into 123
parseInt("123")
Prior to ECMAScript 5, it was necessary to pass the radix for base 10: parseInt("123", 10)
And useful in your toolkit will be to look at a variable to find out what type it is—typeof:
<script type="text/javascript">
/**
* print out the value and the type of the variable passed in
*/
function printWithType(val) {
document.write('<pre>');
document.write(val);
document.write(' ');
document.writeln(typeof val);
document.write('</pre>');
}
var a = "1", b = "2", c = "3", result;
// Step (1) Concatenate "1", "2", "3" into "123"
// - concatenation operator is just "+", as long
// as all the items are strings, this works
result = a + b + c;
printWithType(result); //123 string
// - If they were not strings you could do
result = a.toString() + b.toString() + c.toString();
printWithType(result); // 123 string
// Step (2) Convert "123" into 123
result = parseInt(result,10);
printWithType(result); // 123 number
// Step (3) Add 123 + 100 = 223
result = result + 100;
printWithType(result); // 223 number
// Step (4) Convert 223 into "223"
result = result.toString(); //
printWithType(result); // 223 string
// If you concatenate a number with a
// blank string, you get a string
result = result + "";
printWithType(result); //223 string
</script>
These questions come up all the time due to JavaScript's typing system. People think they are getting a number when they're getting the string of a number.
Here are some things you might see that take advantage of the way JavaScript deals with strings and numbers. Personally, I wish JavaScript had used some symbol other than + for string concatenation.
Step (1) Concatenate "1", "2", "3" into "123"
result = "1" + "2" + "3";
Step (2) Convert "123" into 123
result = +"123";
Step (3) Add 123 + 100 = 223
result = 123 + 100;
Step (4) Convert 223 into "223"
result = "" + 223;
If you know WHY these work, you're less likely to get into trouble with JavaScript expressions.
r = ("1"+"2"+"3") // step1 | build string ==> "123"
r = +r // step2 | to number ==> 123
r = r+100 // step3 | +100 ==> 223
r = ""+r // step4 | to string ==> "223"
//in one line
r = ""+(+("1"+"2"+"3")+100);
Below is a very irritating example of how JavaScript can get you into trouble:
If you just try to use parseInt() to convert to number and then add another number to the result it will concatenate two strings.
However, you can solve the problem by placing the sum expression in parentheses as shown in the example below.
Result: Their age sum is: 98; Their age sum is NOT: 5048
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
function Person(first, last, age, eye) {
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eye;
}
var myFather = new Person("John", "Doe", "50", "blue");
var myMother = new Person("Sally", "Rally", 48, "green");
document.getElementById("demo").innerHTML = "Their age sum is: "+
(parseInt(myFather.age)+myMother.age)+"; Their age sum is NOT: " +
parseInt(myFather.age)+myMother.age;
</script>
</body>
</html>