DEV Community

Cover image for Javascript String Methods: A Cheat Sheet for Developer
Rahul Sharma
Rahul Sharma

Posted on • Edited on

Javascript String Methods: A Cheat Sheet for Developer

Let's understand javascript String functions and how to use them.

String.charAt()

Returns a string representing the character at the given index.
const str = "Hello World";
str.charAt(0); // "H"
Enter fullscreen mode Exit fullscreen mode

String.charCodeAt()

Returns a number representing the UTF-16 code unit value of the character at the given index.
const str = "Hello World";
str.charCodeAt(0); // 72
Enter fullscreen mode Exit fullscreen mode

String.concat()

Returns a new string containing the concatenation of the given strings.
const str = "Hello";
const str2 = " World";
str.concat(str2); // "Hello World"

console.log(`${str}${str2}`); // "Hello World"
console.log(str + str2); // "Hello World"
Enter fullscreen mode Exit fullscreen mode

String.endsWith()

Returns true if the string ends with the given string, otherwise false.
const str = "Hello World";
str.endsWith("World"); // true
Enter fullscreen mode Exit fullscreen mode

String.includes()

Returns true if the string contains the given string, otherwise false.
const str = "Hello World";
str.includes("World"); // true
Enter fullscreen mode Exit fullscreen mode

String.indexOf()

Returns the index within the string of the first occurrence of the specified value, or -1 if not found.
const str = "Hello World";
str.indexOf("World"); // 6
Enter fullscreen mode Exit fullscreen mode

String.lastIndexOf()

Returns the index within the string of the last occurrence of the specified value, or -1 if not found.
const str = "Hello World";
str.lastIndexOf("World"); // 6
Enter fullscreen mode Exit fullscreen mode

String.match()

Returns a list of matches of a regular expression against a string.
const str = "Hello World";
str.match(/[A-Z]/); // ["H"]
Enter fullscreen mode Exit fullscreen mode

String.matchAll()

Returns a list of matches of a regular expression against a string.
const str = "Hello World";
str.matchAll(/[A-Z]/g); // ["H", "W"]

// OR
str.match(/[A-Z]/g); // ["H", "W"]
Enter fullscreen mode Exit fullscreen mode

String.padEnd()

Returns a new string with some content padded to the end of the string.
const str = "Hello";
str.padEnd(15, "World"); // "HelloWorldWorld"
Enter fullscreen mode Exit fullscreen mode

String.padStart()

Returns a new string with some content padded to the start of the string.
const str = "Hello";
str.padStart(15, "World"); // "WorldWorldWorldHello"
Enter fullscreen mode Exit fullscreen mode

String.repeat()

Returns a new string which contains the specified number of copies of the string.
const str = "Hello";
str.repeat(3); // "HelloHelloHello"
Enter fullscreen mode Exit fullscreen mode

String.replace()

Returns a new string with some or all matches of a regular expression replaced by a replacement string.
const str = "Hello World";
str.replace("l", "*"); // "He*lo World"
Enter fullscreen mode Exit fullscreen mode

String.replaceAll()

Returns a new string with some or all matches of a regular expression replaced by a replacement string.
const str = "Hello World";
str.replaceAll("l", "*"); // "He**o Wor*d"

OR;
str.replace(/l/g, "*"); // "He**o Wor*d"
Enter fullscreen mode Exit fullscreen mode

String.search()

Returns the index within the string of the first occurrence of the specified value, or -1 if not found.
const str = "Hello World 1";
const regex = /[^\D\s]/g; // Find digit
str.search(regex); // 12
Enter fullscreen mode Exit fullscreen mode

String.slice()

Returns a new string containing the characters of the string from the given index to the end of the string.
const str = "Hello World";
str.slice(6); // "World"
Enter fullscreen mode Exit fullscreen mode

String.split()

Returns an array of strings split at the given index.
const str = "Hello World";
str.split(" "); // ["Hello", "World"]
Enter fullscreen mode Exit fullscreen mode

String.startsWith()

Returns true if the string starts with the given string, otherwise false.
const str = "Hello World";
str.startsWith("Hello"); // true
Enter fullscreen mode Exit fullscreen mode

String.substring()

Returns a new string containing the characters of the string from the given index to the end of the string.
const str = "Hello World";
str.substring(1, 2); // "e"
Enter fullscreen mode Exit fullscreen mode

NOTE: substring takes parameters as (from, to).

String.substr()

Returns a new string containing the characters of the string from the given index to the end of the string.
const str = "Hello World";
str.substr(1, 2); // "el"
Enter fullscreen mode Exit fullscreen mode

NOTE: substr takes parameters as (from, length).


String.toLowerCase()

Returns a new string with all the uppercase characters converted to lowercase.
const str = "Hello World";
str.toLowerCase(); // "hello world"
Enter fullscreen mode Exit fullscreen mode

String.toUpperCase()

Returns a new string with all the lowercase characters converted to uppercase.
const str = "Hello World";
str.toUpperCase(); // "HELLO WORLD"
Enter fullscreen mode Exit fullscreen mode

String.toString()

Returns the string representation of the specified object.
const str = new String("Hello World");
console.log(str); // Object of String
str.toString(); // "Hello World"
Enter fullscreen mode Exit fullscreen mode

String.trim()

Returns a new string with the leading and trailing whitespace removed.
const str = "  Hello World  ";
str.trim(); // "Hello World"
Enter fullscreen mode Exit fullscreen mode

String.trimEnd()

Returns a new string with the trailing whitespace removed.
const str = "  Hello World  ";
str.trimEnd(); // "  Hello World"
Enter fullscreen mode Exit fullscreen mode

String.trimStart()

Returns a new string with the leading whitespace removed.
const str = "  Hello World  ";
str.trimStart(); // "Hello World  "
Enter fullscreen mode Exit fullscreen mode

Thank you for reading 😊

Got any questions or additional? please leave a comment.


Must Read If you haven't
3 steps to create custom state management library with React and Context API
How to cancel Javascript API request with AbortController
Getting started with SolidJs – A Beginner's Guide

More content at Dev.to.
Catch me on

Youtube Github LinkedIn Medium Stackblitz Hashnode HackerNoon

Top comments (3)

Collapse
 
frankwisniewski profile image
Frank Wisniewski

Using the string methods is not always crowned with success, especially when UTF-8 strings are used.

"use strict";
const str = "πŸ™Œorld";
let myArray =  str.split('') 
console.log(myArray)
// ['\uD83D', '\uDE4C', 'o', 'r', 'l', 'd']
console.log(str.length) // 6 !!
console.log (myArray.length) // 6 !!
console.log (myArray.join('-'))
// οΏ½-οΏ½-o-r-l-d
Enter fullscreen mode Exit fullscreen mode
Collapse
 
adelinemorel profile image
MOREL Adeline

String.padStart()
Returns a new string with some content padded to the start of the string.
const str = "Hello";
str.padStart(15, "World"); // "WorldWorldWorldHello"

Isn't there an extra "world" ?
I think it works like String.padEnd (the number 15 indicates the final length after characters are added, which is not the case here, it has a length of 20).

Thank you for this cheat sheet, I love it πŸ‘πŸ˜€

Collapse
 
franmore_dev profile image
Franco Moreira

does not have a methods .capitalize() how in python?,