Skip to content

hakeemsalman/javascript-string-cheatsheet

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

23 Commits
 
 
 
 
 
 

Repository files navigation

Strings

Click ★ if you like the project. Your contributions are heartily ♡ welcome.


Other cheatsheet or notes links

Definition

  • the textual data is stored as strings. There is no separate type for a single character.

Quotes & Backticks

  1. Strings can be enclosed within either single quotes, double quotes or backticks:
    1. let singleQuote = 'single quoted';
      let doubleQuote = "double quoted";
      let backtick = `backticks`;
      
      function sum(a, b) {
        return a + b;
      }
      
      alert(`1 + 2 = ${sum(1, 2)}.`); // 1 + 2 = 3.
  2. Backticks also allow us to specify a template function before the first backtick.
    1.   	function sum(a, b) {
        		return a + b;
        	}
      
        	alert(`1 + 2 = ${sum(1, 2)}.`); // 1 + 2 = 3.
        	let guestList = `Guests:
        	* John
        	* Pete
        	* Mary
        	`;
      
        	alert(guestList); // a list of guests, multiple lines
        	```
  3. The syntax is: func `string`;
    1. Follow to this Template literals for more details.

Special characters

1. create multiline strings

let guestList = "Guests:\n * John\n * Pete\n * Mary";

alert(guestList); // a multiline list of guests, same as above
Character Description
\n New line
\r In Windows text files a combination of two characters \r\n represents a new break,
while on non-Windows OS it’s just \n.
That’s for historical reasons, most Windows software also understands \n.
\', \", `\` Quotes
\\ Backslash
\t Tab
\b, \f, \v Backspace, Form Feed, Vertical Tab – mentioned for completeness, coming from old times,
not used nowadays (you can forget them right now).
alert( `The backslash: \\` ); // The backslash: \

alert( 'I\'m the Walrus!' ); // I'm the Walrus!

alert( "I'm the Walrus!" ); // I'm the Walrus!

String Length

  • The length property has the string length:
    • alert( `My\n`.length ); // 3

length is a property, str.length is a numeric property, not a function.

Accessing characters

  • Use square brackets [pos] or call the method str.at(pos).
let str = `Hello`;

// the first character
alert( str[0] ); // H
alert( str.at(0) ); // H


// the last character
alert( str[str.length - 1] ); // o
alert( str.at(-1) ); // o 
alert( str[-1] ); // undefined 

Iterate

for (let char of "Hello") {
  alert(char); // H,e,l,l,o (char becomes "H", then "e", then "l" etc)
}

Strings are Immutable

  • Strings cannot be changed in JavaScript. It is impossible to change a character.
let str = 'Hi';

str[0] = 'h'; // error
alert( str[0] ); // (doesn't work) TypeError: Cannot assign to read only property '0' of string 'Hi'

str = 'h' + str[1]; // replace the string

alert( str ); // hi
  • Changing the case: Mutable
alert( 'Interface'.toUpperCase() ); // INTERFACE
alert( 'Interface'.toLowerCase() ); // interface
alert( 'Interface'[0].toLowerCase() ); // 'i'

Methods of Strings

Searching for a substring

1. indexOf()

  1. Returns the position where the match was found, return -1 if nothing can be found.
  2. It looks for the substr in str, starting from the given position pos.
  3. The second parameter is optional allows us to start searching from a given position.

Parameter: indexOf(string, <pos>)
in-place: NO

let str = 'Widget with id';

alert( str.indexOf('Widget') ); // 0, because 'Widget' is found at the beginning
alert( str.indexOf('widget') ); // -1, not found, the search is case-sensitive

alert( str.indexOf("id") ); // 1, "id" is found at the position 1 (..idget with id)
let str = 'Widget with id';
alert( str.indexOf('id', 2) ) // 12

// WORD SEARCH ALGORITHM
let str = 'As sly as a fox, as strong as an ox';

let target = 'as'; // let's look for it

let pos = 0;
while (true) {
  let foundPos = str.indexOf(target, pos);
  if (foundPos == -1) break;

  alert( `Found at ${foundPos}` ); // 7 17 27 
  pos = foundPos + 1; // continue the search from the next position
}

// SHORT HAND 
let str = "As sly as a fox, as strong as an ox";
let target = "as";

let pos = -1;
while ((pos = str.indexOf(target, pos + 1)) != -1) {
  alert( pos );
}
  1. Return value when using an empty search string
"hello world".indexOf(""); // returns 0
"hello world".indexOf("", 0); // returns 0
"hello world".indexOf("", 3); // returns 3

// pos > str.length, then returns str.length
"hello world".indexOf("", 11); // returns 11
"hello world".indexOf("", 13); // returns 11

2. lastIndexOf()

  • It searches from right to left in the string.
  • If the value is not found, it returns -1.
  • If empty is passed into params, returns length of string.
  • It's second argument is optional to specify the starting index for the search (the search will stop before this index).

Parameter: lastIndexOf(string, <pos>)
in-place: NO

let str = 'As sly as a fox, as strong as an ox';

let target = 'as'; // let's look for it

let pos = str.length; // last index
while (true) {
  let foundPos = str.indexOf(target, pos);
  if (foundPos == -1) break;

  alert( `Found at ${foundPos}` ); // 27 17 7
  pos = foundPos - 1; // continue the search from the previous position
}

let str = "Hello World, Hello!";
let lastIndex = str.lastIndexOf("Hello");  // Result: 13
let emptyIndex = str.lastIndexOf("");      // Result: 26 (length of the string)

3. includes():

  • It returns true if the substring is found, and false if it's not.
  • It performs a case-sensitive search to determine whether a given string may be found within this string.
  • It's second argument is optional to specify the index from where the search should start (Defaults to 0.)

Parameter: includes(string, <pos>)
in-place: NO

alert( "Widget with id".includes("Widget") ); // true

alert('World'.includes("world"));   // Result: false (case-sensitive)
alert( "Hello".includes("Bye") ); // false
alert( "Widget".includes("id", 3) ); // false, from position 3 there is no "id"

4. startsWith() and endsWith()

  1. startsWith checks the string begins with the characters of a specified string, returning true, false if not found.
  2. endsWith checks the string end with the characters of a specified string, returning true, false if not found.

Parameter: startsWith(string)
Parameter: endsWith(string)
in-place: Both are NO

alert( "Widget".startsWith("Wid") ); // true, "Widget" starts with "Wid"

alert( "Widget".endsWith("get") ); // true, "Widget" ends with "get"

Getting a substring

  • There are 3 methods in JavaScript to get a substring: substring, substr and slice.
method selects… negatives supports browsers
slice(start, end) from start to end (not including end) allows negatives supports all browser
substring(start, end) between start and end (not including end) NOT SUPPORTED, negative values mean 0 supports all browser
substr(start, length) from start get length characters allows negative start DEPRECATED

slice():

  1. Returns the part of the string from start to (but not including) end.
  2. Negative values for start/end are also possible.
  3. Second argument is optional , then slice goes till the end of the string:

Parameter: slice(start, <end>)
in-place: NO

let str = "ABCDEF";
alert( str.slice(0, 2) ); // 'ABC', the substring from 0 to 5 (not including 5)
alert( str.slice(0, 1) ); // 'A', from 0 to 1, but not including 1, so only character at 0

alert( str.slice(2) ); // 'CDEF', from the 2nd position till the end

// NEGATIVE
// start at the 4th position from the right, end at the 1st from the right
alert( str.slice(-4, -1) ); // 'CDE'
//    A    B   C   D   E   F
//    0    1   2   3   4   5
//   -6   -5  -4  -3  -2  -1

substring():

  1. Returns the part of the string between start and end (not including end).
  2. Negative arguments are NOT supported, they are treated as 0.
  3. This is almost the same as slice, but it allows start to be greater than end (in this case it simply swaps start and end values).
  4. Second argument is optional

Parameter: substring(start, <end>)
in-place: NO

let str = "ABCDEF";

// these are same for substring
alert( str.substring(2, 6) ); // "CDEF"
alert( str.substring(6, 2) ); // "CDEF"  (IT SWAPS THE VALUES)
alert( str.substring(2) ); // "CDEF"

//    A    B   C   D   E   F
//    0    1   2   3   4   5
//    1    2   3   4   5   6

substr():

  1. Returns the part of the string from start, with the given length.
  2. this one allows us to specify the length instead of the ending position:
  3. it’s NOT recommended to use it. In practice, it’s supported everywhere. (in future DEPRECATED)

Parameter: substr(start, <length>)
in-place: NO

let str = "ABCDEF";
alert( str.substr(2, 2) ); // 'CD', from the 2nd position get 2 characters

// The first argument may be negative, to count from the end:
alert( str.substr(-4, 2) ); // 'CD', from the 4th position get 2 characters

at()

  • The at() method of a String takes an integer as input.
  • It returns a new string with the single UTF-16 code unit at the specified position.
  • Supports both positive and negative integers:
    • Positive integers: Count from the start of the string.
    • Negative integers: Count backward from the end of the string.
  • undefined returns, if given index not found.

Parameter: at(index)
in-place: NO

  'salman'.at(1); // a

charAt()

  • Returns the character at a specified index in a string.
  • The index is based on zero (0 being the first character).
  • Supports only Positive numbers
  • if given index NOT found, an empty string '' is returned.

Parameter: charAt(index)
in-place: NO

  'salman'.charAt(1); // a

codePointAt()

code point = U+00F1 or "\u00F1"

  • Returns a non-negative integer, the Unicode code point value at the specified position in a string.
  • It can handle characters that are represented by more than one UTF-16 code unit (such as emoji or rare characters).
  • If the position is out of range, undefined is returned.

Parameter: codePointAt(index)
in-place: NO

  "😍".codePointAt(0); // 128525
  "ABC".codePointAt(0); // 65

FUN FACE: You can use this code in HTML as an entity without icon, &#128525.

concat()

  • Joins two or more strings together.
  • It returns a new string, combining the original string with the specified string(s).
  • This method does NOT change the original string

Parameter: concat(<string>, <string>,.....)
in-place: NO

let str1 = "Hello";
let str2 = "World";
let result = str1.concat(" ", str2);  // Result: "Hello World"
let result = str1.concat(str2);  // Result: "HelloWorld"

match()

  1. Returns the result of matching a string against a Regular expression, null if no match is found.
  2. If the regular expression includes the global flag (/g), it returns all matches; otherwise, it returns only the first match.
  3. When the regexp parameter is a string or a number, it is implicitly converted to a RegExp by using new RegExp(regexp).
  4. It may have unexpected results if special characters are not properly escaped.
  5. You can learn Regex going through this link

If you only want the first match found, you might want to use RegExp.prototype.exec() instead.

Parameter: match(regExp)
in-place: NO

let str = "The rain in Spain stays mainly in the plain";
let result1 = str.match(/ain/g);  // Result: ["ain", "ain", "ain"]
let result2 = str.match(/xyz/);   // Result: null (no match found)
let result2 = str.match(/ain/);   // Result: ["ain"]

const str1 = "NaN means not a number. Infinity contains -Infinity and +Infinity in JavaScript.";
str1.match("number"); // "number" is a string. returns ["number"]

console.log("123".match("1.3")); // [ "123" ]
console.log("123".match("1\\.3")); // null

normalize()

  • The normalize() method in JavaScript returns the Unicode Normalization Form of a given string.
  • It can be used to convert different but equivalent Unicode characters into a consistent form.
  • There are four normalization forms: NFC, NFD, NFKC, and NFKD:
    • NFC (default): Combines characters into the composed form.
    • NFD: Splits characters into the decomposed form.
    • NFKC: Combines characters and applies compatibility transformations.
    • NFKD: Decomposes characters and applies compatibility transformations.

Parameter: normalize(form)
in-place: NO

let str = "e\u0301";  // 'é' as 'e' + combining accent
let normalized = str.normalize();  // Result: "é" (as a single composed character)

In this example, the normalize() method converts the decomposed form (e + accent) into the composed form (é).

padEnd()

  • The padEnd() method in JavaScript pads the current string with another string (or characters) until the resulting string reaches the specified length.

  • The padding is added to the end of the original string.

  • If the padding length exceeds the specified length, the string is truncated to fit.

  • If no padding string is provided, spaces are used by default.

  • Params: padEnd(targetLength, <padString>) Parameter: normalize(form)
    in-place: NO

let str = "Hello";
let result1 = str.padEnd(10);         // Result: "Hello     " (adds 5 spaces)
let result2 = str.padEnd(10, ".");    // Result: "Hello....." (adds 5 dots)
let result3 = str.padEnd(8, "123");   // Result: "Hello123" (pads with "123")

padStart()

  • The padStart() method in JavaScript pads the current string with another string (or characters) until the resulting string reaches the specified length.

  • The padding is added to the beginning of the original string.

  • If the padding length exceeds the specified length, the string is truncated to fit.

  • If no padding string is provided, spaces are used by default.

  • Params: padStart(targetLength, <padString>) Parameter: normalize(form)
    in-place: NO

let str = "Hello";
let result1 = str.padStart(10);         // Result: "     Hello" (adds 5 spaces)
let result2 = str.padStart(10, ".");    // Result: ".....Hello" (adds 5 dots)
let result3 = str.padStart(8, "123");   // Result: "123Hello" (pads with "123")

repeat()

  • The repeat() method in JavaScript returns a new string with the original string repeated a specified number of times.
  • The number of repetitions must be a positive integer.
  • If the repetition count is 0, an empty string is returned.
  • If the count is a decimal, it is automatically rounded down to an integer.
  • Params: repeat(count)
  • Exceptions:
    • RangeError: Thrown if count is negative or if count overflows maximum string length. Parameter: normalize(form)
      in-place: NO
let str = "Hello";
let result1 = str.repeat(3);   // Result: "HelloHelloHello"
let result2 = str.repeat(0);   // Result: "" (empty string)
let result2 = str.repeat(-1); // RangeError
let result2 = str.repeat(1 / 0); // RangeError

replace()

  • The replace() method in JavaScript returns a new string where the first occurrence of a specified value or regular expression (regex) is replaced with a new value.

  • It only replaces the first match unless a global (/g) flag is used with a regular expression.

  • The replacement can be a string or a function to dynamically generate the replacement.

  • The original string remains unchanged.

  • Params: replace(pattern, replacement) Parameter: normalize(form)
    in-place: NO

let str = "Hello World";
let result1 = str.replace("World", "JavaScript");  // Result: "Hello JavaScript"
let result2 = str.replace(/o/g, "0");              // Result: "Hell0 W0rld" (global replacement)

replaceAll()

  • The replaceAll() method in JavaScript returns a new string with all occurrences of a specified value or regular expression replaced with a new value.

  • Unlike replace(), it replaces every match in the string, not just the first one.

  • It can take a string or a regular expression (without the global flag) as the target to replace.

  • The original string is left unchanged.

  • Params: replace(pattern, replacement)

  • Exceptions:

    • TypeError : Thrown if the pattern is a regex that does not have the global (g) flag set (its flags property does not contain "g"). Parameter: normalize(form)
      in-place: NO
let str = "Hello World, Hello Universe";
let result1 = str.replaceAll("Hello", "Hi");    // Result: "Hi World, Hi Universe"
let result2 = str.replaceAll("o", "0");         // Result: "Hell0 W0rld, Hell0 Universe"

search()

  • The search() method in JavaScript searches for a match between a string and a regular expression.
  • It returns the index of the first match or -1 if no match is found.
  • Unlike indexOf(), search() only works with regular expressions, not plain strings.
  • It does not support a second argument for specifying the start position.
  • The g flag of regexp has no effect on the search() result

If you need the content of the matched text, use String.prototype.match()

  • Params: search(regexp) Parameter: normalize(form)
    in-place: NO
let str = "The rain in Spain";
let result1 = str.search(/ain/);   // Result: 5 (first occurrence of "ain")
let result2 = str.search(/xyz/);   // Result: -1 (no match found)

split()

  • The split() method in JavaScript divides a string into an array of substrings based on a specified separator.

  • The separator can be a string or a regular expression.

  • An optional second argument can limit the number of splits.

  • The original string remains unchanged.

  • Params: split(separator, limit) Parameter: normalize(form)
    in-place: NO

let str = "apple,banana,orange";
let result1 = str.split(",");        // Result: ["apple", "banana", "orange"]
let result2 = str.split(",", 2);     // Result: ["apple", "banana"] (limit to 2 splits)
let result2 = str.split(",", 0);     // Result: [] (empty array, limit to 0 splits)
let result3 = str.split("");         // Result: ["a", "p", "p", "l", "e", ",", ...] (splits every character)

Warning: When the empty string ("") is used as a separator, the string is not split by user-perceived characters (grapheme clusters) or unicode characters (code points), but by UTF-16 code units. This destroys surrogate pairs. See this StackOverflow question

If separator is a regexp that matches empty strings, whether the match is split by UTF-16 code units or Unicode code points depends on if the regex is Unicode-aware.

"😄😄".split(/(?:)/); // [ "\ud83d", "\ude04", "\ud83d", "\ude04" ]
"😄😄".split(/(?:)/u); // [ "😄", "😄" ]

Symbol.iterator

  • [Symbol.iterator]() is a built-in method that allows an object to be iterated, like in for...of loops, by returning an iterator.
  • For strings, arrays, and many other objects, this method defines the default iteration behavior.
  • An object with [Symbol.iterator]() can be looped over, as it returns an iterator that produces the values one by one.
  • Parameters: None.

How it works:

  • The object’s [Symbol.iterator]() method must return an iterator object with a next() method.
  • The next() method provides two properties:
    • value: The next value in the iteration.
    • done: A boolean that indicates whether the iteration is finished.
let str = "Hello";
let iterator = str[Symbol.iterator]();  // Creates an iterator for the string

console.log(iterator.next());  // { value: 'H', done: false }
console.log(iterator.next());  // { value: 'e', done: false }
console.log(iterator.next());  // { value: 'l', done: false }
console.log(iterator.next());  // { value: 'l', done: false }
console.log(iterator.next());  // { value: 'o', done: false }
console.log(iterator.next());  // { value: undefined, done: true } (iteration is complete)

toLocaleLowerCase()

  • The toLocaleLowerCase() method in JavaScript converts a string to lowercase, based on the host’s current locale (language and cultural rules).
  • It’s similar to toLowerCase(), but it takes into account locale-specific case mappings, which can differ in some languages.
  • If no locale is specified, it uses the default locale of the environment.

Parameter: toLocalLowerCase() NO Parameter
in-place: NO

let str = "HELLO WORLD";
let result = str.toLocaleLowerCase();  // Result: "hello world"

trim()

  • Return a new string by removing whitespace from both ends of a string.
  • Whitespace includes spaces, tabs, and newlines.

Parameter: trim() NO Parameter
in-place: NO

let str = "   Hello World   ";
let result = str.trim();  // Result: "Hello World" (whitespace removed from both ends)

trimEnd() & trimStart()

  • trimEnd() retrun new string by removing whitespace from the end (right side) of a string.
  • trimStart() return new string by removing whitespace from the beginning (left side) of a string.

Parameter: trimEnd() NO Parameter
Parameter: trimStart() NO Parameter
in-place: NO

let str = "   Hello World   ";
let result = str.trimEnd();  // Result: "   Hello World" (whitespace removed from the end)
let result = str.trimStart();  // Result: "Hello World   " (whitespace removed from the start)

toString()

  • The toString() method converts various data types (numbers, arrays, objects, etc.) into their string representation.
  • It’s automatically called when an object needs to be represented as a string (e.g., in concatenation or console output).
  • When called on a string, toString() simply returns the string itself.
  1. Number:
let num = 123;
let result = num.toString();  // Result: "123" (number converted to string)
  1. Array:
let arr = [1, 2, 3];
let result = arr.toString();  // Result: "1,2,3" (array elements converted to a comma-separated string)
  1. Object: By default, when toString() is called on a regular object, it returns the string "[object Object]". You can override this behavior by defining your own toString() method inside the object.
let obj = {
  name: "John",
  age: 30,
  toString: function() {
    return `Name: ${this.name}, Age: ${this.age}`;
  }
};

let result = obj.toString();  // Result: "Name: John, Age: 30" (custom string representation)

valueOf()

PENDING

String Property

length

  • The length data property of a String value contains the length of the string in UTF-16 code units.
  • It does NOT have paranthesis. ( )
  • It's a non-negative integer.
    • Property attributes of String: length
      Writable no
      Enumerable no
      Configurable no
  • Params: None NO PARANTHESIS
const str = 'Life, the universe and everything. Answer:';

console.log(`${str} ${str.length}`);
// Expected output: "Life, the universe and everything. Answer: 

Comparing strings

  1. A lowercase letter is always greater than the uppercase:
    1. alert( 'a' > 'Z' ); // true
  2. Letters with diacritical marks are “out of order”:
    1. alert( 'Österreich' > 'Zealand' ); // true

codePointAt():

  1. Returns a decimal number representing the code for the character at position pos:

Parameter: codePointAt(pos)
in-place: NO

// different case letters have different codes
alert( "Z".codePointAt(0) ); // 90
alert( "z".codePointAt(0) ); // 122
alert( "z".codePointAt(0).toString(16) ); // 7a (if we need a hexadecimal value)

fromCodePoint()

  1. String is Wrapper Object, not a variable.
  2. It returns a character by passing an argument as a number called numeric code.
alert( String.fromCodePoint(90) ); // Z
alert( String.fromCodePoint(65) ); // A
alert( String.fromCodePoint(0x5a) ); // Z (we can also use a hex value as an argument)

let str = '';

for (let i = 65; i <= 220; i++) {
  str += String.fromCodePoint(i);
}
alert( str );
// ABCDEFGHIJKLMNOPQRSTUVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������
// ¡¢£¤¥¦§¨©ª«¬­®¯°±²³´µ¶·¸¹º»¼½¾¿ÀÁÂÃÄÅÆÇÈÉÊËÌÍÎÏÐÑÒÓÔÕÖרÙÚÛÜ

// Emojis
alert( String.fromCodePoint(0x1F600) ); // 😀
alert( String.fromCodePoint(0x1F602) ); // 😂
alert( String.fromCodePoint(0x1F609) ); // 😉

Tasks

Uppercase the first character

  • Write a function ucFirst(str) that returns the string str with the uppercased first character, for instance:
ucFirst("john") ==> "John";
SHOW SOLUTION
function ucFirst(str) {
  if (!str) return str;

  return str[0].toUpperCase() + str.slice(1);
}

alert( ucFirst("john") ); // John

Check for spam

  • Write a function checkSpam(str) that returns true if str contains ‘viagra’ or ‘XXX’, otherwise false.
checkSpam('buy ViAgRA now') == true
checkSpam('free xxxxx') == true
checkSpam("innocent rabbit") == false
SHOW SOLUTION
function checkSpam(str) {
  let lowerStr = str.toLowerCase();

  return lowerStr.includes('viagra') || lowerStr.includes('xxx');
}

alert( checkSpam('buy ViAgRA now') );
alert( checkSpam('free xxxxx') );
alert( checkSpam("innocent rabbit") );

Truncate the text

  • Create a function truncate(str, maxlength) that checks the length of the str and, if it exceeds maxlength – replaces the end of str with the ellipsis character "…", to make its length equal to maxlength.
truncate("What I'd like to tell on this topic is:", 20) == "What I'd like to te…"

truncate("Hi everyone!", 20) == "Hi everyone!"
SHOW SOLUTION
function truncate(str, maxlength) {
  return (str.length > maxlength) ? str.slice(0, maxlength - 1) + '…' : str;
}

Extract the money

  • We have a cost in the form "$120". That is: the dollar sign goes first, and then the number.
  • Create a function extractCurrencyValue(str) that would extract the numeric value from such string and return it.
alert( extractCurrencyValue('$120') === 120 ); // true
SHOW SOLUTION
function extractCurrencyValue(str) {
  return +str.slice(1);
}

Reference Source