Working with strings and escape sequences

Question:

If I can add 2 numbers, can I combine 2 strings?

Answer:

Yes, that is called concatenation. The concatenation operator is also the + symbol. When used with numbers it will add, when used with strings, it will concatenate. For example:

    var firstName = "Brian", lastName = "Wilson", fullName;
    fullName = firstName + " " + lastName;

Notice inserting the literal " " between firstName and lastName. Without that, the value of fullName would be "BrianWilson".

Also note that you are not limited to concatenating just 2 strings. You may concatenate as many strings as needed.

Question:

What if I mix strings and numbers?

Answer:

Once a string is encountered, + is used for concatenation instead of addition. Consider the following examples:

    var n1 = 1, n2 = 2, n3 = "5", t1, t2, t3;
    t1 = n1 + n2 + n3;
    t2 = n3 + n2 + n1;
    t3 = n3 + (n2 + n1);

In the above example, t1 has a value of 35, t2 is 521, and t3 is 53.

Question:

Why does the last line use parentheses?

Answer:

t1 has a value of 35 because n1 and n2 are numbers, so are added before string n3 is encountered and thus concatenated with the sum of 1 + 2.

t2 has a value of 521, because string n3 is encountered first, so all + operators are used for concatenation.

t3 has a value of 53 because the parentheses isolate numbers n2, and n1. Operations inside parentheses are performed first, so n2 and n1 are added, then the sum of 2 + 1 is concatenated with n3.

Question:

Since strings are enclosed in quotes, how do I place a quote inside my string?

Answer:

To place one or more " inside your literal, enclose your string between two '. To place one or more ' inside your literal, enclose your string between two ". For example:

    var str1, str2;
    str1 = "I'm so happy to learn JavaScript, aren't you?";
    str2 = 'She said, "Yes I am!"';

Question:

What if I need to place both types of quotes inside my string?

Answer:

Use the escape sequences \" and \'. for example:

    var str1;
    str1 = "She said: \"I\'m happy I\'m learning JavaScript\"!"

Question:

What is an escape sequence?

Answer:

An escape sequence is a character inside a literal string that is preceded by the \ (back-slash) character. The \ alerts JavaScript that the following character requires special handling. For example, \" tells JavaScript that the " is not the closing quote for the string, so it should print the " instead of terminating the string.

For a list of escape sequences, see: appendix - escape sequences.

Checkpoint

Questions 2.3

1. What is it called when you combine 2 strings?
2. Can you mix numbers and strings?
3. How do you include quotes inside a literal string?

Exercise 2.3

1. Declare 3 variables: str1, str2, and str3
2. Assign "Welcome" to str1
3. Assign "to JavaScript" to str2
4. Concatenate the 2 strings and assign to str3 so it has a value of:
   "Welcome to JavaScript"
5. Hint: add a space between the 2 strings when you concatenate

web developer toolbox 2.3

Add a link to the JavaScript menu

• Open menu_js.html in your favorite editor
• Below your Building Blocks category, (create a new a tag inside a new dd tag to) add a link: Strings
• href should be: javascript/bb_strings.html

Add a new JavaScript page

• In the javascript folder, open aaa_template.html in your favorite editor, and save-as: bb_strings.html
• Below the comment "edit category name", change text from template to Building Blocks
• Below the comment "edit publish and update dates", change both dates to the current date

Update the new page

• Below the comment "edit company name, page title, and page description", change:
  • Company Name to: your name
  • Template to: Strings
  • ...template to: Working with strings
• Update the comments section:
  • <dt>Concatenate</dt>
  • <dd>Use the + operator to combine 2 strings</dd>
• Insert html inside the wxHtmlResults div:
  • <p id="p1"></p>
  • <p id="p2"></p>
  • <p id="p3"></p>

Add JavaScript below the line of asterisks following the text:
** BEGIN DEVELOPER JAVASCRIPT SECTION

• Complete the instructions for Exercise 2.3
• Assign the value of str1 to the innerHTML of p1
• Assign the value of str2 to the innerHTML of p2
• Assign the value of str3 to the innerHTML of p3

Open menu_js.html in your browser and click on your new link

Click on the Run javascript button to test your code