Another data type that we should be aware of are strings. A string is any collection of characters, surrounded by a matching set of either double or single quotations.
The following are all examples of string;
"This is a string"
'this is a string too'
"four - one = three"
'5'
'!*/%^'
Remember from the discussion on “Exposing Data”, that the text function (text()), takes as its first input any parameter that can be converted to a string, including a string. So, we could pass any of the above strings to that function, to display it on the canvas.
| [ Code Download ] | [ View on GitHub ] | [ Live Example ] |
Notice, that the quotation marks are not printed, only the text inside the quotation marks. If you want to use quotation marks inside a string, you have two options.
The first, is to use the other quotation marks to encapsulate the string. Notice that in the following example, double quotation marks are used to wrap a string containing a single quotation mark or apostrophe. Then single quotation marks are used to encapsulate a a string, with a quote in it. Notice, in the last example, the color coding breaks, because we try to use a single quote, inside a string encapsulated in single quotes.
var one = "This Mark's first exam.";
var two = 'Today Mark mentioned he "really prefers dogs".';
var three = 'This breaks Mark's code';The other way to use the same type of quotation marks in a string is to “escape” them. This is done with the backslash (the key above return). An escaped character tells the computer to treat the proceeding character as part of the string, and not a command for it.
var string1 = "This is an example of \"escaped\" quotation marks."
text( string1, 10, height/2 );
Strings are not Numbers. However;
String and Number data types are stored differently inside of the computers memory. They are also treated differently by the computer compiler.
To convert a Number to a String, the string function (String()) can be invoked, passing the Number as a parameter to the function.
String(x) // returns a string from a number variable x
String(123) // returns a string from a number literal 123
String(100 + 23) // returns a string from a number from an expression
To convert a string, containing only numbers characters to Number data type, use the “positive unary operator” (+), prepended in-front of the string, or variable holding the string. The positive unary operator, is related to the “negative unary operator”, that can be used to switch the sign of a Number. NOTE: The positive unary operator needs to directly proceed the string. (i.e. no spaces)
"44" // ← returns the string "44"
+"44" // ← returns the Number 44
var der = "44";
der // ← returns the string "44"
+der // ← returns the Number 44
The Number() function can also be used to turn valid strings to Numbers.
Number("44") // returns 44
Number("3.14") // returns 3.14
Number(" ") // returns 0
Number("") // returns 0
Number("99 88") // returns NaN, since there is a space
Number("forty") // returns NaN, since the string includes non-number characters
There are not many operators that we can apply directly to Strings. However, one that will be used often is string addition. As with arithmetic addition, string addition uses the addition operator (+). String addition, as you might suspect, adds to strings together, making them one string.
In the following example, the strings st1 and st2 are added together. At first, since no space is included, the words run together. The second example, shows the use of string addition to add a string with a space (" ") in between.
var st1 = "Hi";
var st2 = "I'm Michael";
var st3 = st1 + st2;
// st3 = "HiI'm Michael";
st3 = st1 + " " + st2;
// st3 = "Hi I'm Michael";
String addition can also be used to add Numbers to Strings. This is how I have been printing out variables with the text() function.
In the following example, from the math operator page, the variables are displayed in the string. But they are added to strings, thereby converting them to strings.
text( "width: " + width, 20, 40 );
text( "pos_x: " + pos_x, 20, 80 );
| [ Code Download ] | [ View on GitHub ] | [ Live Example ] |
Please read the following pages, with more critical info on Strings.