Javascript String Literal

String is a very important concept in javascript, as it is a script language, to me a script language does not have any typed data but string, you might not believe it, everything is in string.

String use in javascript itself it is ok, but normally it is mixed with html, even worse it was spit out by a server language like php, java or asp.net. More often that you are programming javascript in php or any other server language. Lack of understanding of javascript string will most likely end up ‘Unterminated String’ error in browser.

I am going to talk about string literal in javascript, not string as an object which is much easier and nothing to talk about.

Let us start from its definition, what is a string literal:

A string literal is zero or more characters enclosed in matching single or double quotes. Each character may be represented by an escape sequence

Coming from C# background, we are used to concepts of two forms of string literals, regular and verbatim

A regular string literal in c#
string g = “\\\\server\\share\\file.txt”;
You will get : \\server\share\file.txt

A verbatim string literal in c#
string h = @”\\server\share\file.txt”;
You will get: \\server\share\file.txt

As a lazy programmer I always like verbatim string, as you do not need to wind your brain around the escaping sequences, which I think it is not suitable to read for a human, which is why we as programmers have got a job to do, but as a programmer, I am also human, so naturally avoiding any unhuman thing… sorry for the rant. So I always use verbatim as it is WYSWYG.

Copying the same logic into javascript, I was trying to search verbatim string literal in javascript.

I was totally confused, and not knowing what kind of string literal it is in javascript.

Let me confuse you for a bit:

<script type="text/javascript">
  var str1 ="He's my friend";
  var str2 ="He\'s my friend";
</script>

Do you reckon that you are going to get same [He’s my friend] from str1 and str2? yes you do!.

From the use of str1, you would think javascript string literal is verbatim, because it is WYSWYG, from str2, it is regular, but anyway, when you carry on your work in javascript,you would obvious treat it as verbatim, WHICH IS WRONG.

In javascript string literal are so called regular string literal, by no means they are verbatim one.

The confusing thing is you can get away with not escaping single quote in a double quotes delimited string, and not escaping double quote in a single quote delimited string. You can get away with those two by luck, but not in following situations:

1. Single quote and double quote can sometime be interpreted as quote without escaping as mentioned in above situations, but not other characters like \r return and \n new line
2. If you are not careful about delimiter used by the string, for example you are not escaping single quote in single quote delimited string, that is where things go wrong, this happens especially you are spitting javascript code from php or other server language.
Example of this is

<script type="text/javascript">
  var str3 ='He's my friend'; // wrong string literal
  var str4 ="He said "blah..."";// wrong string literal
</script>

So how to avoid this?

Always escape single quote, double quotes in javascript string.

<script type="text/javascript">
  var str5 ='He\'s my friend'; 
  var str6 ="He said \"blah...\"";
</script>

In php when you try to pass string literal to javascript, you will have to do like this

<script>   
           var myvar = <?= '"'.mysql_escape_string($myVarValue).'"'; ?>; 
</script> 

This entry was posted on Thursday, December 2nd, 2010 at 12:29 am and is filed under Javascript. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

Leave a Reply

*