// use single quote (or apostrophe) character for JS strings, double quotes for quotes
var quotedString = 'This is a string "with a quote" inside it';
// otherwise use the backslash character (\) to escape quotes and apostrophes
var anotherString = "This is a string with an escaped \"quote\" inside it";While this is useful advice for teaching escape sequences–which you will probably need when including HTML, CSS or other languages inside strings–you don’t need to do it when including English text.
Its ok if you don’t know this, as we’re getting into the realms of typographic geekery that the average developer or programming book author doesn’t delve into, but let me explain.
A little history
The quotation marks we often see inside strings and all over the web today are commonly called straight (or ambidextrous) quotes. They are ” (U+0022 - quotation mark) and ’ (U+0027 apostrophe) respectfully. Their unicode name doesn’t help the confusion one bit.
Back in ye olde days when we had beautiful typography, and all was well in the world, quotes were nice and curvy. We opened quotes with a single ( ‘ ) or double ( “ ) left quotation mark and closed it with a single ( ’ ) or double ( ” ) right quotation mark.
When the typewriter was invented, space for all the mechanics needed for the keys was limited. Instead of taking up four keys, plus addition ones for prime ( ′ , used for feet, arc-minutes and minutes), double prime ( ″ , used for inches, arc-seconds and seconds), ditto (〃) and so on, generic straight quotes were added instead.
Typewriters are long gone, but then came the problem of the ASCII character set. It had limited space for characters due to the primitive storage and memory requirements at the time, so it too only included the straight quote marks.
We have since outgrown typewriters and ASCII, with Unicode prevalent on most computers (and devices) today. So lets set our quotes free of this legacy restriction and allow them to flaunt their curves.
Unescaped quotes in strings
Now armed with the knowledge of the correct quotes to use, we can include them in our strings without fear of escapes. It even saves two characters per quote:
var curvyQ = "This is a string with “correct unescaped quotes”.";
var apostToo = 'Don’t use straight quotes, and avoid needing to escape.';
As can be seen above, apostrophes have the same issue and solution, with the right single quote mark used instead of the straight quote. Actually there are multiple apostrophes such as ( ʼ ) Letter apostrophe, U+02BC, but you most likely don’t need to know about those.
Typing these fancy quotes
Word processors with smart quotes turned on will swap out straight quotes for curvy quotes, but they sometimes get it wrong, can be plain annoying when you want straight quotes (such as when typing code), and few developers likely code in MS Word or OpenOffice.
Fortunately, on the Mac at least, they are easy to type by hand. On a US keyboard they are alt-[ (left double quote), shift-alt-[ (right double quote), alt-] (left single quote) and shift-alt-] (right double quote). For other keyboard layouts your milage may very, but the keyboard viewer menu item will help you to find them.
It looks like it is a whole lot more difficult to type them on Windows, unless things have changed since that article, and my last experience on that OS. But, you can always set up your own shortcuts.
If you don’t want to type them by hand, you can use the unicode escapes or HTML entities, but I find this makes the source code less elegant and harder to read.
What about the q element
All kinds of developers get this quote thing wrong, including browser developers. If you include the q element in your HTML, Firefox and Chrome will use the correct quote marks, but Safari and Opera use straight quotes.
Fortunately you can use CSS to correct this:
q, q:lang(en) { quotes:"“" "”" "‘" "’"; }Bear in mind that different language use different quote marks (Including British English, but it just reverses the nesting order between single and double quotes), so if you have a multi-lingual site you may want to look up the other quote marks and make use of the lang pseudo-class.
When you do need to escape quotes?
As far as I’m aware, the only time you actually need to use straight quotes is when programming, such as for surrounding attribute values in HTML (and then only when the value has a space), strings in JavaScript, and so on, but not in written language.