types-grammar, ch1: filling out the rest of the discussion on string values

Author: getify

types-grammar/ch1.md

@@ -9,7 +9,7 @@ In Chapter 1 of the "Objects & Classes" book of this series, we confronted the c
 
 Here, we'll look at the core value types of JS, specifically the non-object types called *primitives*.
 
-## Core Values
+## Built-in Values
 
 JS provides seven built-in, primitive (non-object) value types:
 
@@ -198,11 +198,35 @@ myName = "Kyle";
 
 Strings can be delimited by double-quotes (`"`), single-quotes (`'`), or back-ticks (`` ` ``). The ending delimiter must always match the starting delimiter.
 
-Strings have an intrinsic length which corresponds to how many code-points they contain. This does not necessarily correspond to the number of visible characters you type between the start and end delimiters (aka, the string literal). It can sometimes be a little confusing to keep straight the difference between a string literal and the underlying string value, so pay close attention.
+Strings have an intrinsic length which corresponds to how many code-points they contain.
 
-If `"` or `'` are used to delimit a string literal, the contents are only parsed for *character-escape sequences*: `\` followed by one or more characters that JS recognizes and parses with special meaning. Any other characters in a string that don't parse as escape-sequences (single-character or multi-character), are inserted as-is into the string value.
+```js
+myName = "Kyle";
+
+myName.length;      // 4
+```
+
+This does not necessarily correspond to the number of visible characters you type between the start and end delimiters (aka, the string literal). It can sometimes be a little confusing to keep straight the difference between a string literal and the underlying string value, so pay close attention.
+
+#### JS Character Encodings
+
+What type of character encoding does JS use for string characters?
 
-#### Single-Character Escapes
+One might assume UTF-8 (8-bit) or UTF-16 (16-bit). It's actually more complicated, because you also need to consider UCS-2 (2-byte Universal Character Set), which is similar to UTF-16, but not quite the same. [^UTFUCS]
+
+The first 65,535 code points in Unicode is called the BMP (Basic Multilingual Plane). All the rest of the code points are grouped into 16 so called "supplemental planes" or "astral planes". When representing Unicode characters from the BMP, it's pretty straightforward.
+
+But when representing extended characters outside the BMP, JS actually represents these characters code-points as a pairing of two separate code units, called *surrogate halves*.
+
+For example, the Unicode code point `127878` (hexadecimal `1F386`) is `🎆` (fireworks symbol). JS stores this as two surrogate halve code units, `U+D83C` and `U+DF86`.
+
+This has implications on the length of strings, because a single visible character like the `🎆` fireworks symbol, when in a JS string, is a counted as 2 characters for the purposes of the string length!
+
+We'll revisit Unicode characters shortly.
+
+#### Escape Sequences
+
+If `"` or `'` are used to delimit a string literal, the contents are only parsed for *character-escape sequences*: `\` followed by one or more characters that JS recognizes and parses with special meaning. Any other characters in a string that don't parse as escape-sequences (single-character or multi-character), are inserted as-is into the string value.
 
 For single-character escape sequences, the following characters are recognized after a `\`: `bfnrtv0'"\`. For example,  `\n` (new-line), `\t` (tab), etc.
 
@@ -235,12 +259,55 @@ console.log(windowsDriveLocation);
 
 Multi-character escape sequences may be hexadecimal or unicode sequences.
 
-Hexidecimal escape sequences are used to encode any of the base ASCII characters (codes 0-255), and look like `\x` followed by exactly two hexidecimal characters (`0-9` and `a-f` / `A-F` -- case insensitive). For example, the escape-sequence `\xA9` (or `\xa9`) corresponds to the ASCII character with code-point `169`: `©` (copyright symbol).
+Hexidecimal escape sequences are used to encode any of the base ASCII characters (codes 0-255), and look like `\x` followed by exactly two hexadecimal characters (`0-9` and `a-f` / `A-F` -- case insensitive). For example, `A9` or `a9` are decimal value `169`, which corresponds to:
 
-Unicode escape sequences encode any of the characters in the unicode set whose code-point values are from 0-65535, and look like `\u` followed by exactly four hexidecimal characters. For example, the escape-sequence `\u00A9` (or `\u00a9`) corresponds to that same `©` symbol, while `\u263A` (or `\u263a`) corresponds to the unicode character with code-point `9786`: `☺` (smiley face symbol).
+```js
+copyright = "\xA9";  // or "\xa9"
+
+console.log(copyright);     // ©
+```
+
+For any normal character that can be typed on a keyboard, such as `"a"`, it's usually most readable to just specify the literal character, as opposed to a more obfuscated hexadecimal representation:
+
+```js
+"a" === "\x61";             // true
+```
+
+##### Unicode
+
+Unicode escape sequences encode any of the characters in the unicode set whose code-point values range from 0-65535, and look like `\u` followed by exactly four hexadecimal characters. For example, the escape-sequence `\u00A9` (or `\u00a9`) corresponds to that same `©` symbol, while `\u263A` (or `\u263a`) corresponds to the unicode character with code-point `9786`: `☺` (smiley face symbol).
 
 When any character-escape sequence (regardless of length) is recognized, the single character it represents is inserted into the string, rather than the original separate characters. So, in the string `"\u263A"`, there's only one (smiley) character, not six individual characters.
 
+Unicode code-points can go well above `65535` (`FFFF` in hexadecimal), up to a maximum of `1114111` (`10FFFF` in hexadecimal). For example, `1F4A9` is decimal code-point `128169`, which corresponds to the funny `💩` (pile of poo) character.
+
+But `"\u1F4A9"` wouldn't work as expected, since it would be parsed as `\u1F4A` as a unicode escape sequence, followed by just the `9` literal character. To address this limitation, a variation of unicode escape sequences was introduced in ES6, to allow an arbitrary number of hexadecimal characters after the `\u`, by surrounding them with `{ .. }` curly braces:
+
+```js
+myReaction = "\u{1F4A9}";
+
+console.log(myReaction);
+// 💩
+```
+
+Recall the earlier discussion of extended (non-BMP) Unicode characters, *surrogate halves*? The same `💩` could also be defined with the explicit code-units:
+
+```js
+myReaction = "\uD83D\uDCA9";
+
+console.log(myReaction);
+// 💩
+```
+
+All three representations of this same character are stored internally by JS identically and are indistinguishable:
+
+```js
+"💩" === "\u{1F4A9}";                // true
+"\u{1F4A9}" === "\uD83D\uDCA9";     // true
+```
+
+Even though JS doesn't care which way such a character is represented, consider the readability differences carefully when authoring your code.
+
 #### Line Continuation
 
 The `\` followed by an actual new-line character (not just literal `n`) is a special case, and it creates what's called a line-continuation:
@@ -250,15 +317,48 @@ greeting = "Hello \
 Friends!";
 
 console.log(greeting);
-// Hello
-// Friends!
+// Hello Friends!
 ```
 
-As you can see, the new-line at the end of the `greeting = ` line is immediately preceded by a `\`, which allows this string literal to continue onto the subsequent line. Without the escaping `\` before it, a new-line appearing in a `"` or `'` delimited string literal would actually produce a JS syntax parsing error.
+As you can see, the new-line at the end of the `greeting = ` line is immediately preceded by a `\`, which allows this string literal to continue onto the subsequent line. Without the escaping `\` before it, a new-line -- the actual new-line, not the `\n` character escape sequence -- appearing in a `"` or `'` delimited string literal would actually produce a JS syntax parsing error.
 
-The new-line itself is still in the string value.
+Because the end-of-line `\` turns the new-line character into a line continuation, the new-line character is omitted from the string, as shown by the `console.log(..)` output.
 
-// TODO
+| NOTE: |
+| :--- |
+| This line-continuation feature is often referred to as "multi-line strings", but I think that's a confusing label. As you can see, the string value itself doesn't have multiple lines, it only was defined across multiple lines via the line continuations. A multi-line string would actually have multiple lines in the underlying value. |
+
+#### Template Literals
+
+I mentioned earlier that strings can alternately be delimited with `` `..` `` back-ticks:
+
+```js
+myName = `Kyle`;
+```
+
+All the same rules for character encodings, character escape sequences, and lengths apply to these types of strings.
+
+However, the contents of these template (string) literals are additionally parsed for a special delimiter sequence `${ .. }`, which marks an expression to evaluate and interpolate into the string value at that location:
+
+```js
+myName = `Kyle`;
+
+greeting = `Hello, ${myName}!`;
+
+console.log(greeting);      // Hello, Kyle!
+```
+
+Everything between the `{ .. }` in such a template literal is an arbitrary JS expression. It can be simple variables, or complex JS programs, or anything in between.
+
+| TIP: |
+| :--- |
+| This feature is commonly called "template literals" or "template strings", but I think that's confusing. "Template" is usually referred to in programming contexts as a reusable definition that can be re-evaluated with different data. For example, *template engines* for pages, email templates for newsletter campaigns, etc. This JS feature is not re-usable. It's a literal, and it produces a single, immediate value (usually a string). You can put such a value in a function, and call the function multiple times. But then the function is acting as the template, not the the literal itself. I prefer instead to refer to this feature as *interpolated literals*, or the funny, shortened *interpoliterals*, as I think this name is more accurately descriptive. |
+
+Some JS developers believe that this style of string literal is preferable to use for *all* strings, even if you're not doing any expression interpolation. I disagree. I think it should only be used when interpolating, and classic `".."` or `'..'` delimited strings should be used for non-interpolated string definitions.
+
+Moreover, there are a few places where `` `..` `` style strings are disallowed. For example, the `"use strict"` pragma cannot use back-ticks, or the pragma will be silently ignored (and thus the program accidentally runs in non-strict mode). Also, this style of strings cannot be used in quoted property names of object literals, or in the ES Module `import .. from ..` module-specifier clause.
+
+My advice: use `` `..` `` delimited strings where allowed, and only when interpolation is needed, but keep using `".."` or `'..'` delimited strings for all other strings.
 
 ### Number Values
 
@@ -560,4 +660,6 @@ Here, the `myAge` and `yourAge` variables each have their own copy of the number
 
 // TODO
 
-[^IEEE754]: IEEE-754; https://en.wikipedia.org/wiki/IEEE_754; Accessed July 2022
+[^UTFUCS]: "JavaScript’s internal character encoding: UCS-2 or UTF-16?"; Mathias Bynens; January 20 2012; https://mathiasbynens.be/notes/javascript-encoding ; Accessed July 2022
+
+[^IEEE754]: "IEEE-754"; https://en.wikipedia.org/wiki/IEEE_754 ; Accessed July 2022

types-grammar/toc.md

@@ -9,7 +9,7 @@
 * Foreword
 * Preface
 * Chapter 1: Primitives
-	* Core Values
+	* Built-in Values
     * Value Immutability
     * Assignments Are Value Copies
     * TODO