Popular JavaScript String Functions And How to Manipulate string in Javascript

Hello friends, in this tutorial, we are going to study string manipulation. However, if we see, basically, we use very few functions frequently. But it will be better to understand the other string methods. If we know the basic method with good effort, it will be easier for us to go deeper.

1. What Are JavaScript Strings?

As we know, we need a way to communicate the words (feeling) in any language. For representing those words, we need text to express those feelings. In Javascript, it defines by ‘string’. The technical definition would be ordered collections of the unicode character that are permanent(immutable). Every string has a length property. In Javascript for strings, we will enclose it with either single or double-quotes. Here are some of the examples for the string literals

let single = 'single-quoted values';
let double = "double-quoted values";

let backticks = `backticks values`;

2. Searching for a String in a String ( in Javascript)

The search() method in javascript searches a string for a specific value and returns the matched string’s position.

var str = "Please check the blog spycoding frequently";
var pos = str.search("spycoding");
var posOne = str.search("Javascript");

OutPut
// pos : 22
// posOne : -1

3. String Length

The length property returns the length of the given string.

var str = "Hello World";
console.log(str.length);
//Output
//11

4. charAt(x)

This function will return the position of a given character within the string.

//charAt(x)
var myString = 'Spycoding Coding';
console.log(myString.charAt(7));
//output: n

5. split()

This function will split the string into an array (many parts) based on the specified delimiter. There is one optional parameter, “limit,” which is an integer. It specifies the maximum number of elements return in the array.

//syntax split('', limit);

// example without limit
var str = 'Hi I want to become good developer';
str.split('');
// output: (7) ["Hi", "I", "want", "to", "become", "good", "developer"]

// example with limit
str.split(' ',4);
// Output: (4) ["Hi", "I", "want", "to"]

6. substr(start, [length])

This method returns the characters in a string based on the input we have provided in the function. There is two option “start” and “length”. The second value is optional. If we have not offered the optional parameter, it will consider up to the end of the string.

var str = 'Hello world! welcome the world of javascript world';

// method 1 with one parameter
console.log(str.substr(5));
//output: " world! welcome the world of javascript world"

// method 2 with optional parameter
console.log(str.substr(2,5));
//output: "llo w"

7 slice() — Return a section of a string

The slice() method will extract the section of a string based on the input(index) and return it as a new string. It is useful when we want to retrieve the exact amount of the portion.

//slice(beginIndex)
//slice(beginIndex, endIndex)

// example one 
var str = 'Hi I want to become good developer';
str.slice(3);
//output : "I want to become good developer" (it has removed the first three character from the string)

//example 2
str.slice(3,8);
//output: "I wan"

First, it has removed the first three characters. The second value we have passed is 8. It means that the total size of the string will be 8. Out of 8, it has removed the first three and output the remaining character.

8. repeat() — Repeats a string a specified number of times

The repeat() function will returns a string consist of the element we have provided in number of times.

let strValue = ' Simplicity gratitude humble ';
strValue.repeat(3)

//output: " Simplicity gratitude humble  Simplicity gratitude humble  Simplicity gratitude humble "

9. charCodeAt

The charCodeAt() method returns a string representing the UTF-16 code. It ranges from 0 to 65535

//syntax: str.charCodeAt();

'a'.charCodeAt()
//output: 97

'A'.charCodeAt()
//output:65

var str = 'Apple';
var str1 = 'apple';

str.charCodeAt(0)
//output: 65

str1.charCodeAt(0)
//output: 97 

10. match() : Returns array of matching strings

The match() function fetches the result of the matching string against the provided regular expression.

// syntax : str.match(regex);

const paragraph = 'Spycoding platform';
const regex = /[A-Z]/g;
const found = paragraph.match(regex);

console.log(found);
// expected output: Array ["T"]

11. replace(regexp/substr, replacetext)

The replace() method is called on a string, and it will return a string. Basically, by using the pattern, it is replaced by the replacement string. We can provide both regex or the string to compare and replace the string. By using regex, we can replace all matches(by using the g option ). But with string, it replaces only the first occurrence.

var str = 'Hello world! welcome the world of javascript world';

let stringPattern = 'world';
let regex = /world/gi;
let replacement = 'london';

// try the both option 
console.log(str.replace(stringPattern, replacement));
//output: "Hello london! welcome the world of javascript world"

//second option with regex
console.log(str.replace(regex, replacement))

//output

"Hello london! welcome the london of javascript london"

12. indexOf() — Finding the index of a substring

indexOf was the primary way we can check if a substring existed in the string. If the substring exists in the string, it will return the substring index from which it has started. If it existed from the beginning, it will return 0. If the substring not existed in the string it will return -1.

var str = 'Hello world! welcome the world of javascript world';

str.indexOf('london')
//output: -1 (value not existed in the string)

str.indexOf('Hello');
//output: 0 (In the begining)

str.indexOf('welcome');
//output: 13 // it started from the 13 character

13. toUpperCase()

This function return a string with all upper case letters.

var str = 'Hello world! welcome the world of javascript world';
str.toUpperCase();

//output: "HELLO WORLD! WELCOME THE WORLD OF JAVASCRIPT WORLD"

14. toLowerCase()

This function return a string with all lower case letters.

var str = 'Javascript';
str.toLowerCase();

//output "javascript"

15. trim()

This trim() method removes the whitespace from the beginning and end of the string. While working on the project, we can observe that we need to use this function regularly.

var str = '    in the beginning of the line and in the end  ';
str.trim()

// output: "in the beginning of the line and in the end"

16.  endsWith()

This method checks whether a string end with specified string or not.

//example

var str = 'Hello world! welcome the world of javascript world';

str.endsWith('world')

//output : true

str.endsWith('world1');

// output: false

17. startsWith()

This method checks whether a string start with specified string or not.

//example

var str = 'Hello world! welcome the world of javascript world';

str.startsWith('world')

//output : false

str.startsWith('Hello');

// output: true

18. concat(v1,v2..)

This function combines one or more strings into one and returns the combined string.

var str = 'hello';
var str1 = ' world';
var str2 = ' new concept';

str.concat(str1, str2);
//output: hello world new concept

These are the some of the most commonly used Javascript string functions.