All JS String Methods In One Post!

Hello everybody, I'm Aya Bouchiha, on this beautiful day we're going to discuss all string methods in
Javascript!

Firstly, we need to know that all All methods do not change the original string, they return a new one.

concat()

• concat() : this method links together two strings or more.

const firstName = 'Aya ';const lastName = 'Bouchiha';// 3 methods to concatenate two stringsconsole.log(firstName.concat(lastName)); // Aya Bouchihaconsole.log(firstName +  lastName); // Aya Bouchihaconsole.log(`${firstName}${lastName}`); // Aya Bouchiha

match()

• match(): used to searches a string for a match against a regular expression, and returns the matches as an Array.

const quote =  "If you don't know where you are going, any road will get you there.";console.log(quote.match(/you/g)) // [ "you", "you", "you" ]

matchAll()

• matchAll(): returns an iterator of all results matching a string against a regular expression, including capturing groups.more details...

const conversation = `Hi, I'm Aya Bouchiha
Hello, I'm John Doe, nice to meet you.`;const matchedArrays = [...conversation.matchAll(/I'm\s(?<firstName>[a-zA-Z]+)\s(?<lastName>[a-zA-Z]+)/gi)];console.log(matchedArrays[0])for (let matchedArray of matchedArrays) {  const {firstName, lastName} = matchedArray['groups']  console.log(firstName, lastName)}

Output:

[  "I'm Aya Bouchiha",  'Aya',  'Bouchiha',  index: 4,  input: "Hi, I'm Aya Bouchiha
Hello, I'm John Doe, nice to meet you.",  groups: [Object: null prototype] { firstName: 'Aya', lastName: 'Bouchiha' }]Aya BouchihaJohn Doe

split()

• split(separator) : convert a string to an array by splitting it into substrings.

const allLetters = 'abcdefghijklmnopqrstuvwxyz'; console.log(allLetters.split())console.log(allLetters.split(''))const emails = '[email protected],[email protected],[email protected]';console.log(emails.split(',')) 

Output:

[ 'abcdefghijklmnopqrstuvwxyz' ][  'a', 'b', 'c', 'd', 'e', 'f',  'g', 'h', 'i', 'j', 'k', 'l',  'm', 'n', 'o', 'p', 'q', 'r',  's', 't', 'u', 'v', 'w', 'x',  'y', 'z'][  '[email protected]',  '[email protected]',  '[email protected]']

replace()

• replace(searchString, newValue): is a method that returns a new string with some or all matches of a pattern replaced by a replacement. The pattern can be a string or a RegExp, and the replacement can be a string or a function to be called for each match. If a pattern is a string, only the first occurrence will be replaced.more details

const email = '[email protected]';console.log(email.replace('@gmail.com', '')); // john.doeconsole.log(email.replace(/@[a-z]+.[a-z]+/g, '')); // john.doe

replaceAll()

• replaceAll(searchString, newValue): is a method that returns a new string with all matches of a pattern replaced by a replacement. The pattern can be a string or a RegExp, and the replacement can be a string or a function to be called for each match.more details...

const slug = '5-html-tags-that-almost-nobody-knows';// 5 html tags that almost nobody knowsconsole.log(slug.replaceAll('-', ' ')); // 5 html tags that almost nobody knowsconsole.log(slug.replaceAll(/-/g, ' ')); 

search()

• search(valueToSearch) : returns the position (index) of a specific value in a string, if the specific value does not exist in the string, it returns -1.

const quote = 'A dream does not become reality through magic; it takes sweat, determination, and hard work';console.log(quote.search('magic')); // 40console.log(quote.search(/life/g)); // -1

trim()

• trim() : delete whitespaces & tabs from the start & the end of a string

const inputValue = '  Aya   Bouchiha';console.log(inputValue.trim()); // Aya   Bouchiha

includes()

• includes(value) : this method checks if a giving value exists in a string. if the value exists, It returns true, otherwise, It returns false

const address = 'Morocco, Rabat';console.log(address.includes('Morocco'));// trueconsole.log(address.includes('morocco'));// falseconsole.log(address.includes('tanger')); // false

toLowerCase()

• toLowerCase() : this method returns a given string with lowercase letters.

const name = 'AYa BoUCHIha';console.log(name.toLowerCase()) // aya bouchiha

toUpperCase()

• toUpperCase() : returns a given string with uppercase letters.

const name = 'AYa BoUCHIha';console.log(name.toUpperCase()) // AYA BOUCHIHA

toLocaleUpperCase()

• toLocaleUpperCase() : returns a given string with uppercase letters according to locale-specific case mappings. It's the same thing with toLocaleUpperCase but this one returns the string with uppercase letters.

const turkishSentence = 'iskender kebap';// ISKENDER KEBAPconsole.log(turkishSentence.toUpperCase('en-us')); // SKENDER KEBAPconsole.log(turkishSentence.toLocaleUpperCase('tr')) 

repeat()

• repeat(n) : returns a string repeated n times.

const firstName = 'aya';console.log(firstName.repeat(3)) // ayaayaaya

slice()

• slice(startIndex = 0, endIndex = str.length) : is a string method that extract a specific part of a string. It is simillar to substring.difference between slice and substring...

const fullName = 'Aya Bouchiha';console.log(fullName.slice()) // Aya Bouchihaconsole.log(fullName.slice(0,3)) // Ayaconsole.log(fullName.slice(4,fullName.length)) // Bouchiha

substr()

• substr(startIndex, length=string.length) : returns a specific part of a string, starting at the specified index and extending for a given number of characters afterwards.

console.log(fullName.substr(0,3)) // Ayaconsole.log(fullName.substr(4,8)) // Bouchiha

chartAt()

• chartAt(index = 0) : this method returns the character at a giving index in a string.Note: 0 <= index < string.length

const product = 'laptop';console.log(product.charAt()) // lconsole.log(product.charAt(3)) // tconsole.log(product.charAt(10)) // ''

charCodeAt()

• charCodeAt(index): method returns an integer between 0 and 65535 representing the UTF-16 code unit at the given index.

const product = 'laptop';console.log(`the character code of ${product.charAt(2)} is is ${product.charCodeAt(2)}`)// the character code of p is is 112

startsWith()

• startsWith(valueToSearch, startingIndex = 0) : returns true if a string starts with a giving value, otherwise It returns false;

const phoneNumber = '+212612342187';console.log(phoneNumber.startsWith('+212')) // trueconsole.log(phoneNumber.startsWith('6',4)) // trueconsole.log(phoneNumber.startsWith('6',3)) // false

endsWith()

• endsWith(valueToSearch, length=string.length) : returns true if a string ends with a giving value, otherwise It returns false;

const address = 'tanger, Morocco';console.log(address.endsWith('Morocco')); // trueconsole.log(address.endsWith('Canada')); // falseconst gmail = '[email protected]';const isGmail = gmail.endsWith('@gmail', gmail.length - 4)console.log(isGmail); // true

fromCharCode()

• fromCharCode(n1, n2,...) : converts a unicode number to a character.

console.log(String.fromCharCode(112)) // pconsole.log(String.fromCharCode(105,106)) // ij

indexOf()

• indexOf(value, start=0) : returns the position of the first occurrence of a specified value in a string. If the value is not found, It returns -1.

const quote = "very day may not be good... but there's something good in every day";console.log(quote.indexOf('good')); // 20console.log(quote.indexOf('good',24)); // 50

lastIndexOf()

• lastIndexOf(value, start) : returns the position of the last occurrence of a specified value in a string. It searches the string from the end to the beginning, but returns the index s from the beginning, starting at position 0.If the value is not found, It returns -1.

const quote = "very day may not be good... but there's something good in every day";console.log(quote.lastIndexOf('good')); // 50console.log(quote.lastIndexOf('good',24)); // 20

localeCompare()

• localeCompare(stringToCompare, locales) : returns -1, 1, or 0 if the string comes before, after, or is equal in sort order.more details

const word1 = 'feel';const word2 = 'flee';// returns -1// because word1 comes before word2console.log(word1.localeCompare(word2)) 

valueOf()

• valueOf() : returns the primitive value of a string.

const fName = new String('Aya');const lName = 'Bouchiha';console.log(fName); // [String: 'Aya']console.log(fName.valueOf()); // Ayaconsole.log(lName.valueOf()); // Bouchiha

toString()

• toString() : returns a string representing the specified object.

const moroccanCity = new String('tanger');console.log(moroccanCity); // [String: 'tanger']console.log(moroccanCity.toString()) // tanger

Summary

• concat() : links together two strings or more.
• match() : searchs a string for a match against a regular expression, and returns the matches as an Array.
• matchAll(): returns an iterator of all results matching a string against a regular expression, including capturing groups.
• split() : convert a string to an array by spliting it into substrings.
• replace(), replaceAll() : return a new string with some or all matches of a pattern replaced by a replacement.
• search() :returns the position of a specific value in a string
• trim() :delete whitespaces & tabs from the start & the end of a string
• includes() : checks if a giving value exists in a string
• toLowerCase() : returns a given string with lowercase letters.
• toUpperCase() : returns a given string with uppercase letters.
• toLocaleLowerCase() : returns a given string with lowercase letters according to locale-specific case mappings.
• toLocaleUpperCase() : returns a given string with uppercase letters according to locale-specific case mappings.
• repeat() : repeat a string n times
• slice(), substr(), substring() : extract a specific part of a string
• chartAt() :returns the character at a giving index in a string.
• charCodeAt() :returns an integer between 0 and 65535 representing the UTF-16 code unit at the given index.
• startsWith() : returns true if a string starts with a giving value, otherwise It returns false;
• endsWith() :returns true if a string ends with a giving value, otherwise It returns false;
• fromCharCode() : converts a unicode number to a character.
• indexOf() : returns the position of the first occurrence of a specified value in a string.
• toString() : returns a string representing the specified object.
• lastIndexOf() :eturns the position of the last occurrence of a specified value in a string.
• localeCompare() :returns -1, 1, or 0 if the string comes before, after, or is equal in sort order.
• valueOf() : returns the primitive value of a string.

to contact me:

• gmail: [email protected]
• telegram: AyaBouchiha

References

• www.w3schools.com
• www.developer.mozilla.org

Have an amazing day!