My Development Notes


How to Work with Strings in JavaScript


Basics

The various string methods in JavaScript are given here with examples :

const sentence = "This is my house.";

console.log(sentence.length);
// returns 17

console.log(sentence[3]);
// returns 's'

console.log("This is my house.".length);
// returns 17

console.log(sentence.indexOf("s"));
//returns '3'

console.log(sentence.lastIndexOf("s"));
// returns '14'

console.log(sentence.slice(5, 11));
//returns 'is my'

console.log(sentence.slice(0, sentence.lastIndexOf(" ")));
// returns 'This is my'

console.log(sentence.slice(-5));
// returns 'ouse.' - the last 5 characters

To change the case of a string :

const aSentence = 'Hello there!';
console.log(aSentence.toLowerCase());
// returns 'hello there!'

console.log(aSentence.toUpperCase());
// returns 'HELLO THERE!'

How to replace parts of Strings

Here’re some examples to do so:

const myName = 'Prakash Raj';
const correctName = myName.replace('Prakash', 'Akshay');
console.log(correctName); 
// returns Akshay Raj

We can also use replaceAll method to replace more than one occurrences in a string :

const aPhrase = 'cat is a cat cat koo';
console.log(aPhrase.replaceAll('cat', 'dog'));
// returns 'dog is a dog dog koo'

Regular expressions can also be used to replace all the occurrences in a string using /parts-of-string/g :

const sentence = "hello sir hello sir hello";
console.log(sentence.replace(/hello/g, "hi"));
// returns 'hi sir hi sir hi'

Note: All String methods are case sensitive.

Boolean Methods in Strings

We have includes(), startsWith() and endsWith() as boolean methods which returns either true or false:

const aSentence = 'Hello my friends';
console.log(aSentence.includes('my'));
// returns true
console.log(aSentence.startsWith('He');
// returns true
console.log(aSentence.endsWith("ends"));
// returns true

Padding in Strings

Padding in strings have two methods : padStart() and padEnd(). Here’re some examples of how they work :

const newString = "You can enter now!";
console.log(newString.padStart(20, "+ "));
// output : '+ You can enter now!'
// 20 is the total length and + is added to the start

const newString = "You can enter now!";
console.log(newString.padStart(33, "+"));
//output: '+++++++++++++++You can enter now!'
// total length 33 and + added to start
const newString = "You can enter now!";
console.log(newString.padEnd(33, "Go "));

// output:'You can enter now!Go Go Go Go Go '
// Notice the space after 'Go' in second line 

A real-world example of padding

A credit card number is always masked on an online payment gateway (like this ********7867) for security reasons. JavaScript padding method is used to display results as such. Let’s do this with an example :

const maskedCard = function (number) {
  const cardNumber = number + "";
  // number converts to string
  const last4Digits = cardNumber.slice(-4);
  return last4Digits.padStart(cardNumber.length, "*");
};

console.log(maskedCard(132425562687));
// output: '********2687'

The above function converts the card number into string first, then filters out the last four digits, and then, masks out all other numbers using the padding method in strings which returns a secured masked credit card number.

How to repeat strings multiple times

To repeat strings see the below example :

const sentence = `You're under arrest! `;
console.log(sentence.repeat(5));
// You're under arrest! You're under arrest! You're under arrest! You're under arrest! You're under arrest!

Leave a Reply

Your email address will not be published. Required fields are marked *