Customize Output:Notes on Quotes

AdventureJS allows authors to build complex dynamic strings that contain HTML/CSS, placeholders, and Javascript template literals. When using these, you'll want to be mindful about nested quotes, which represent a common pitfall for beginning developers. For instance, the following text with quotes inside quotes would cause an error.

This will likely result in something like the following error in the browser's console.

The reason for this is that quote marks are used in Javascript (and many other programming languages) to mean "start here" and "stop here" when evaluating text strings. When Javascript encounters the first quote, it starts reading the string. When it encounters the next quote, it stops and closes the string. If there's another quote inside the quotes, Javascript closes the string there, leading to unpredictable results in the remaining parts of the string. There are several ways to work around this, which require careful attention.

The first way is to use something called an escape, where we use a forward slash before a character to escape it from being read as a start/stop operator. This is a pretty common method across many programming languages.

Here's where it gets a little more complex. While you can't use double quotes inside other double quotes without escaping them, you can use single quotes inside double quotes and vice versa, and you can use both kinds of quotes inside `` backtick characters (which is a special feature of Javascript). The following are all workable patterns.

Take a look at this example of a complex string with nested quotes, and you can see why it pays to be mindful.

description: `The clerk's fingers draw air quotes as she says, <span class="quote">"You'll love it – it's our \"best\" selling device."</span>. `;