JavaScript

Strings

String Primitives and String Objects

JavaScript distinguishes between String objects and primitive string values. The same goes with Boolean and Number.

Creating strings

Primitive strings
From string literals using:
- '' single quotes
- "" double quotes
- `` backticks (template literals)
String objects
Using: String() constructor

let stringPrim = "A string primitive";
stringPrim;                     // 'A string primitive'
typeof stringPrim;              // 

let stringObj = new String("A String object");
stringObj;                      // String {'A String object'}
typeof stringObj;               // object

Converting between primitive strings and string objects

new String(stringPrim)

To convert a string primitive into a string object, use String() constructor.

stringObj.valueOf()

To convert a string object into a string primitive, use valueOf() method.

let stringPrim = "Kitten";
stringPrim;                     // 'Kitten'
typeof stringPrim;              // string

let stringObj = new String(stringPrim);
stringObj;                      // String {'Kitten'}
typeof stringObj;               // object

let stringPrim2 = stringObj.valueOf();
stringPrim2;                    // 'Kitten'
typeof stringPrim2;             // string

Most used operations and methods on strings:

length operator
concatenations using + and += operators
checking of existence or locations using indexOf() method
deriving content using substring() method

Character Access

"string".charAt(index)

text.charAt(index)

Character of a string can be access using charAt() method.

"Kitten".charAt(1);     // "i"
let text = "Kitten";
text.charAt(1);         // "i"

"string"[index]

text[index]

It also can be treated like an array-like object.

"Kitten"[i];     // "i"
let text = "Kitten";
text[i];         // "i"

Escaping Characters

Backslash \ is used to escape characters.

let sentence = 'I\'m Kitten.';  // "I'm Kitten."

Concatenations and Template Literal

Concatenations using + and += operators can be used to chain strings together. However usng template literals is a better way to do it.

In template literals, instead of single '' or double "" quotes, backticks `` are used. Then, expresssions can be embedded within as substitutions using ${...}.

const greeting = "Hello";
const name = "Kitten";
console.log(greeting + ", " + name + "!"); // "Hello, Kitten!"

const greeting = "Hello";
const name = "Kitten";
console.log(`${greeting}, ${name}!`); // "Hello, Kitten!"

Concatenating or embedding number with/in strings works fine. Concatenation takes priority over additions. Number data type will be considered as string without further process

const roomNum = 123;
console.log(`Room number is ${roomNum}.`);      // Room number is 123.
console.log("Room number is " + roomNum + "."); // Room number is 123.

To change a number into a string, use toString()

Expressions in strings

const song = 'Fight the Youth';
const score = 9;
const highestScore = 10;
const output = `I like the song ${song}. I gave it a score of ${score/highestScore * 100}%.`;
console.log(output);  

// "I like the song Fight the Youth. I gave it a score of 90%."

Multiline strings

Template literals respects line breaks n the source code. Using regular single or double quotes, we have to use line break characters \n in the string.

const output = `I like the song.
I gave it a score of 90%.`;
console.log(output);  
// I like the song.
// I gave it a score of 90%.

const output = 'I like the song.\nI gave it a score of 90%.';
console.log(output);
// I like the song".
// I gave it a score of 90%.

Comparing Strings

Comparing strings can be done with:

Method: localeCompare()
Comparison operators, such as<, >, and ===. It's case sensitive and results will be in boolean.

let textA = "A";
let textB = "B";
textA < textB;      // true
textA > textB;      // false 

let textA2 = "A";
let textA3 = "a";
textA === textA2;   // true
textA === textA3;   // false
textA2 < text A3;   // true

To make case insensitive, use toUpperCase() method. It's preffered rather than toLowerCase() method because some problems with certain UTF-8 character conversions.

let textA2 = "A";
let textA3 = "a";
textA2 === textA3;                              // false
textA2.toUpperCase() === textA3.toUpperCase();  // true

Example of use

let textA = "ABC";
let textB = "123";
let upperA = textA.toUpperCase();
let upperB = textB.toUpperCase();
let result;

if (upperA < upperB) {
    result = "before";
} else if (upperA > upperB) {
    result = "after";
} else {
    result = "the same as"
}

console.log(`"${textA}" is ${result} "${textB}"`); // Trying out various textA and textB
// "ABC" is before "DEF"
// "ABC" is the same as "abc"
// "ABC" is after "aaa"
// "ABC" is after "123"