Mastering JavaScript: A Guide to String Manipulation Techniques

This blog discusses the different string manipulation methods available in javascript.

Strings in JavaScript

Strings are the sequence of characters which is used to store the data in the form of "text". In JavaScript, Strings are derived data type which represents the object and is immutable which simply means strings are stored by reference and Their value can't be changed once assigned. If you try to change it, A new string reference object will be returned and the original string will remain unchanged.

String manipulation refers to the technique of extracting and manipulating the string literals and there are many ways to achieve the same results. we will see what are method available in javascript for this purpose.

template literal

In 2015, ECMAScript (ES6) introduced the concept of the template literal which is widely used for string interpolation(to create new strings allowing embedded javascript expressions in it) and for multi-line strings. Template literal are the literals represented by backtick (` ) character.

Let's see how it makes the string concatenation looks easy while combining the output of javascript expressions. In a single statement, you can add as many expressions as want and It looks very elegant and readable.

const a ='java',b="script",c="es6";
a.concat(b); // will return javascipt, It will concatenate both string
const res= "Combined strings is: "+ a+ ' '+ b +', '+c; 
// using the template literals
const res =`Combined strings is: ${a} ${b}, ${c}`; // will print the same result

Extracting the part of the string

slice() method: It takes two parameters (starting index, last index), the second parameter is optional and It will by default assume the end of the string.
It even accepts the negative indexing which means start counting from the reverse(see below code snippet).
Providing (starting index > last index) will simply return the empty string and doesn't yield any error.

const str="javascript strings are immutable";
const slicedStr=str.slice(1,3); // start from index 1 and ending index < 3
console.log(slicedStr); 
// if you want to extract the last 5 character from strings
console.log(str.slice(-5)); // means start from 5 index before the end index and go on to last index if 2nd parameter is optional.

substring() method: similar to the slice method but doesn't accepts the negative indexing.

substr() method: Same as the slice method but takes the second parameter as the length of the string you want to extract.

const res="javascript strings are immutable";
const slicedStr=res.substring(1,5); // will give you "avas"
console.log(slicedStr);
console.log(res.substr(1,3)); // will give "ava"

trim() method: It removes the starting and ending whitespaces from a string.

const str="         javascript             ";
console.log(str.trim()); // javascript and starting and ending whitespaces will be removed.

split() method: It accepts the delimiter argument and split the string into an array of substrings which can be further used in conjunction with the join method to format the string.

const str="javascript string split method";
const res=str.split(' ') ; // [ 'javascript', 'string', 'split', 'method' ]
console.log(str.split( ).join(',')); // javascript,string,split,method

replace() method: It replaces the search text that matches the string with the replacement. If there are multiple occurrences of the search pattern, It will only replace the first match. but if you want to replace all occurrences use the replaceAll() method.

const search=' ',replacement='#';
const str="this is the new string";
console.log(str.replace(search,replacement)); // prints "this#is the new string"

console.log(str.replaceAll(search,replacement)); // prints "this#is#the#new#string"

In this blog, we discussed about string manipulation, its implementation and how it can be used. that's all from my end for this post.
If you found this article valuable then please share it with others and provide your feedback.