How Do Strings Behave in JavaScript?

The reason is that the comparison operators turn their operands into simple values and then compare them, and when both sides are strings the comparison is done letter by letter. Each character is compared by its code unit value, and the first difference decides the result. When one string is the beginning of the other, the shorter string sorts first.

The result that surprises people is the treatment of case. Uppercase letters have lower code unit values than lowercase letters, so the comparison puts every capital letter before every small letter. That is why comparing with the greater-than operator gives you an order that does not match what people expect from an alphabetical list.

The same thing happens with punctuation and digits. The digits come before the uppercase letters, and the punctuation comes before the digits, and all of that follows the numeric code points rather than any human idea of alphabetical order.

For real text, use the localeCompare method. It compares two strings using the rules of a language, so case, accents, and language-specific ordering are handled in the way that a reader expects. You can pass a locale to control the language and an options object to control how strict the comparison is, so a comparison can ignore case or ignore accents when you ask for that.

One more point is worth making in an interview. Comparing strings with the equality operators compares the content and not the identity, and it does not change between types. A string is never equal to a number, even when the number looks like the same digits, so the comparison operators and the equality operators behave differently here. The next question in this topic looks at what happens when you try to change a string.

Nothing happens, because strings are immutable. The characters are fixed, and every string method gives you a new string instead of editing the one you already have.

const original = 'hello';

// Assigning to an index has no effect.
original[0] = 'H';
console.log(original);   // 'hello'

// Methods return a new string.
const shouted = original.toUpperCase();
console.log(shouted);   // 'HELLO'
console.log(original);  // 'hello' - untouched

// Long strings are measured in code units.
const symbol = '\u{1F600}';
console.log(symbol.length);       // 2 - two code units
console.log([...symbol].length);  // 1 - one character

Assigning to an index of a string is quietly ignored in sloppy mode, and it throws a TypeError in strict mode. Every ES module runs in strict mode, so code that runs as a module gets the error, and that is the better outcome because it tells you straight away that the string cannot be edited.

To change a string you build a new one. The toUpperCase and toLowerCase methods give you a new string. The replace and replaceAll methods give you a new string with the matched text swapped out. Adding two strings together with the plus operator produces a new string as well. None of them touch the original.

The length example at the end is the one to remember when the text is not plain ASCII. The length property and the index access work in UTF-16 code units, so a character outside the basic multilingual plane counts as two and reading one of those positions gives you a broken half-character. Putting the string into an array with the spread operator gives you whole characters, and the codePointAt method gives you the numeric code point of a character directly.

There is a performance reason behind all of this, and it is the reason strings are fast. Because a string never changes, the engine can share one copy between several places without copying it. That is why comparing two equal strings is cheap, and it is also why repeated concatenation inside a loop can be slow, because every step creates a new string.

Nothing happens, because strings are immutable. The characters are fixed and every string method returns a new string instead of editing the original one.

const original = "hello";

// Assigning to an index has no effect.
original[0] = "H";
console.log(original);   // "hello"

// Methods return a new string.
const shouted = original.toUpperCase();
console.log(shouted);   // "HELLO"
console.log(original);  // "hello" - untouched

// Long strings are measured in code units.
const symbol = "\u{1F600}";
console.log(symbol.length);       // 2 - two code units
console.log([...symbol].length);  // 1 - one character

Assigning to an index of a string is silently ignored in sloppy mode and throws a TypeError in strict mode. Since every ES module is strict, code running as a module gets the error, which is the better outcome because it tells you the string cannot be edited.

To change a string you build a new one. The toUpperCase and toLowerCase methods return a new string. The replace and replaceAll methods return a new string with the matched text substituted. Concatenation with the plus operator produces a new string. None of them touch the original.

The length example at the end is the one to remember when the text is not plain ASCII. The length property and index access work in UTF-16 code units, so a character outside the basic multilingual plane counts as two and indexing into it produces a broken half-character. Spreading the string into an array gives you whole characters, and the codePointAt method gives you the numeric code point of a character directly.

There is a performance angle too, because this is what makes strings fast. Because a string never changes, engines can share identical string values without copying them, which is why comparing two equal strings is cheap and why repeated concatenation in a loop can be slow, since each step creates a new string.