iTranslated by AI
Why Do Strings Have a length Property Even Though They Are Primitives?
The length Property of Strings
When you want to get the number of characters in a string, you can do so by accessing the length property.
const str = "foobarbaz";
console.log(str.length); //9
Since a string is a primitive value, it should not have properties.
However, you can reference the length property because a wrapper object is temporarily created, and you are referencing the property held by that object.
In contexts where a method is to be invoked on a primitive string or a property lookup occurs, JavaScript will automatically wrap the string primitive and call the method or perform the property lookup on the wrapper object instead.
The length Property and Types
Because strings are treated as if they essentially possess a length property, TypeScript is designed so that assigning a string to an object type that has only String properties or methods, such as {length: number}, does not result in a compilation error.
type T = { length: number; includes: (searchString: string) => boolean };
const obj: T = "foobarbaz"; // No compilation error occurs
If the type of length does not match the type of length held by the String object, a compilation error will be issued.
type U = { length: string; includes: (searchString: number) => boolean };
const obj2: U = 'foobarbaz' //Type 'string' is not assignable to type 'U'.(2322)
The {} Type
Since a string can be assigned to an object of type {length: number}, it can also be assigned to an object of type {}, which is a compatible type.
const obj:{} = 'foobarbaz' // No compilation error occurs
{} is a type to which all values except null and undefined can be assigned.
const obj:{} = 234
const obj2:{} = false
const obj3:{} = Symbol
const obj4:{} = undefined //Type 'undefined' is not assignable to type '{}'.(2322)
const obj5:{} = null //Type 'null' is not assignable to type '{}'.(2322)
const obj6:{} = Math.random() > 0.5 ? 1 : undefined
//Type 'number | undefined' is not assignable to type '{}'.
//Type 'undefined' is not assignable to type '{}'.(2322)
Be Careful with Surrogate Pairs
The length property does not represent the number of characters; it represents the number of code units.
Therefore, surrogate pair characters (such as 𩸽 or 𠮷) are counted as a length of 2. (There are also characters that result in even larger values, such as 👨👩👧👧.)
By expanding a string into an array using the spread syntax and then counting the number of elements, you can determine the visual character count (the spread syntax separates the string by code points).
const str = '𩸽と𠮷'
console.log(str.length) //5
console.log([...str].length) //3
console.log([...str]) //["𩸽", "と", "𠮷"]
Note that even with this method, emojis and other characters may return results that are counter-intuitive.
console.log([...'👨👩👧👧']) //["👨", "", "👩", "", "👧", "", "👧"]
console.log([...'👨👩👧👧'].length) //7
So it's not even counted as 4 people. 👨👩👧👧
Discussion