Nesting Quotes And The Escape Character

Many times you will work with strings which contain quotes. Since the JavaScript interpreter reads the first quote it encounters as the beginning of the string, and reads the very next quote it encounters as the end of the string, we need a way to signify that a quote is part of a string and not the end of it.

There are two ways to accomplish this goal: nesting opposite quotes and using a special character called the escape character.

Nesting Opposite Quotes

String values can be surrounded by either single quotes or double quotes. Except in the case of event handlers which always surround their values in double quotes, which type of quote you use is entirely up to you.

Which type of quote you use to surround your nested string is determined by the type of quote surrounding its containing string. A nested string is surrounded by the oppisite kind of quote which surrounds its containing string. I call this "quote swapping". In other words, if my outer string is contained by double quotes, my inner string must be contained by single quotes, and vice versa.

Nest single and double quotes as follows:
var beasty = "He said 'howdy', I said 'hi'." // nesting single quotes within double quotes

var boys = 'He said "howdy", I said "hi".' // nesting double quotes within single quotes

<a href="javascript:alert(boys)">Show me the string</a>

The Escape Character

It is legal to surround a nested string with the same type of quote as is surrounding its containing string as long as the escape character ( \ ) precedes the nested quote. The escape character tells the JavaScript interpreter that the quote is part of the string, not the end of the string.
var beasty = "He said \"howdy\", I said \"hi\"." // nesting double quotes within double quotes

var boys = 'He said \'howdy\', I said \'hi\'.' // nesting single quotes within single quotes

<a href="javascript:alert(beasty)">Show me the string</a>
Some scripters, including myself, prefer to use the escape character rather than quote swapping to avoid mistakes so easily made when nesting both kinds of quotes. Others always use single quotes (except in the case of event handlers) to contain their nested quotes. The reason is that very often your JavaScript strings are HTML - which requires its attributes to be quoted. This allows the printing of the HTML to be "natural" - as it would be written in a static document, with double quotes surrounding attribute values.

Escaping Carriage Returns

When working with long strings in your source code, you may be tempted to break the string up into multiple lines to make it more readable. While this sounds good, placing a carriage return in the middle of quoted text string will cause a script error - which for IE browsers is "Unterminated string constant". This is because the JavaScript interpreter sees carriage returns as the end of a statement - you may as well have placed a semi colon there.

Although the next lesson covers much more efficient ways to break up a long string, I'll quickly explain how the escape character can be used to do the same thing. Place a single string on multiple lines using only one set of quotes for the entire string. Anywhere you want to break the string, place the escape character ( \ ) at the end of the line, then a carriage return.
'hello world.\
my name is Jenn\
This carriage-retun-escaping technique which simply breaks up a string in source code is not often used because it does not provide a way to concatenate a string variable into the mix. But hey, somebody out there just might like to use it!
>>String Literals and String Variables
>>Nesting Quotes And The Escape Character
>>String Concatenation and String Operators
>>Creating Line Breaks
>>Strings To Numbers: Data Type Conversion
>>Strings and The Write Method


View Source | Home | Contact