Important JavaScript String Methods Every Developer Should Know

Important JavaScript String Methods Every Developer Should Know
August 17, 2023

Have you ever had a bunch of text that needed to be spiced up, chopped, or molded in a certain way?

In the vast world of coding, JavaScript swoops in as a superhero for text manipulation. Strings, which are essentially sequences of characters, are no match for JavaScript's built-in methods.

Let's dive into some of these fantastic tools and see how they can help in everyday coding!

1. charAt()

Think of a string as a line of people, each holding a letter. If you want to know what letter the third person is holding, use charAt(). It tells you the letter at a certain position.

Example: "John" → The third person (or position 2, since we start counting from 0) is holding "h".

let name = "John";
console.log(name.charAt(2));  // outputs: "h"


2. concat()

Imagine you have two or more words or phrases, and you want to join them to form a sentence. concat() is like tying those words together with a string.

Example: Combining "Hello, " with "Jane!" gives you "Hello, Jane!".

let greeting = "Hello, ";
let name = "Jane!";
console.log(greeting.concat(name));  // outputs: "Hello, Jane!"


3. includes()

Imagine you've written a long story and you want to know if you mentioned the word "love" in it. includes() is like a search tool. It tells you if that word is in your story or not.

Example: In "I love coding.", the word "love" is there, so it says true.

let sentence = "I love coding.";
console.log(sentence.includes("love"));  // outputs: true


4. indexOf()

This is like playing 'hide and seek' with letters. You ask, "Where did the word 'banana' hide in my text?" And indexOf() points to where it starts.

Example: In "apple, banana, cherry", "banana" starts at the 7th position.

let phrase = "apple, banana, cherry";
console.log(phrase.indexOf("banana"));  // outputs: 7


5. toLowerCase() and toUpperCase()

These are like costume changes for your text. You can make your text whisper (all small letters) using toLowerCase(), or shout (all capital letters) using toUpperCase().

Example: "Hello World" can whisper as "hello world" or shout as "HELLO WORLD".

let text = "Hello World";
console.log(text.toLowerCase());  // outputs: "hello world"
console.log(text.toUpperCase());  // outputs: "HELLO WORLD"


6. trim()

Have you ever seen a sandwich with too much bread on the edges? trim() is like cutting off that extra bread, but for spaces at the start and end of your text.

Example: " Too many spaces. " becomes "Too many spaces.".

let messy = "   Too many spaces.  ";
console.log(messy.trim());  // outputs: "Too many spaces."


7. split()

Imagine you have a necklace with beads separated by knots. split() is like breaking the necklace at each knot, giving you a list of beads.

Example: "apple,banana,cherry" can be split at each comma to get ["apple", "banana", "cherry"].

let fruits = "apple,banana,cherry";
console.log(fruits.split(","));  // outputs: ["apple", "banana", "cherry"]


8. replace()

Ever written something and wanted to change one word to another? replace() is like a magic eraser. It finds the word you want to change and swaps it with another one.

Example: If you have "I like cats." and want "dogs" instead of "cats", you'll get "I like dogs.".

let message = "I like cats.";
console.log(message.replace("cats", "dogs"));  // outputs: "I like dogs."


9. slice()

Imagine a cake. You want to take just a piece from the middle, not the whole cake. slice() lets you cut out a piece of your text.

Example: From "JavaScript is fun!", if you want just the part "JavaScript", you slice from the start to the 10th position.

let str = "JavaScript is fun!";
console.log(str.slice(0, 10));  // outputs: "JavaScript"



Resources for You

ChatGPT Guide For Software Developers

Learn to use ChatGPT to stay ahead of competition

Front-End Developer Interview Kit

Today, Start preparing to get your dream job!

JavaScript Developer Kit

Start your JavaScript journey today!

Are you looking for Front-end Developer Job?

Get Front-end Interview Kit Now, And Be Prepared to Get Your Dream Job

Get Front-end Interview Kit

Newsletter for Developers!

Join our newsletter to get important Web Development and Technology Updates