DEV Community

Cover image for JavaScript Tutorial Series: String methods
The daily developer
The daily developer

Posted on • Updated on

JavaScript Tutorial Series: String methods

In this post we're going to talk about string methods. We've previously came across one which is length. Let's begin.

Remember strings cannot be modified but only replaced, meaning string methods return new strings.

Length

Length method returns the length of the string as seen in the JavaScript String lesson.

 let str = "This is a string";
 let strlen = str.length;
 console.log(strlen); //16
Enter fullscreen mode Exit fullscreen mode

Replace and Replace all

Replace method

The method replace() substitutes a value with another, it returns a new string with the changes but does not alter the original string.

This method takes two arguments, the first argument is the value we want to replace, and the second the value we want to replace the original value with.

This method only replaces the first matched value and is case-sensitive.

let str = "This is a string and this is a string";
let strReplace = str.replace("a string", "my string");
console.log(str); //This is a string and this is a string
console.log(strReplace); //This is my string and this is a string
Enter fullscreen mode Exit fullscreen mode

ReplaceAll method

The replaceAll() method is similar to the replace() method, the only difference is that it replaces all the matched values with the value we want.

let str = "This is a string and this is a string";
let strReplace = str.replaceAll("string", "cat");
console.log(str); ///This is a string and this is a string
console.log(strReplace); //This is a cat and this is a cat
Enter fullscreen mode Exit fullscreen mode

Slice SubString and Substr

slice() takes a chunk of a string and outputs it as a new string. This method takes two arguments, the first is the start position which is inclusive and the second argument is the end position which is not inclusive.
Remember zero-based indexing

let str = "Slice this string";
let strSlice = str.slice(11,17);
console.log(str);
console.log(strSlice);

Enter fullscreen mode Exit fullscreen mode

The method will slice out the remaining portion of the string if the second parameter is not provided:

let str = "Slice this string";
let strSlice = str.slice(6);
console.log(str); //Slice this string
console.log(strSlice); //this string
Enter fullscreen mode Exit fullscreen mode

The position is counted from the end of the string if a parameter is negative:

let str = "Slice this string";
let strSlice = str.slice(-11, -3);
console.log(str); //Slice this string
console.log(strSlice); //this str
Enter fullscreen mode Exit fullscreen mode

Substring

The method substring() is similar to slice() the only difference is that any negative number passed as an argument will be considered 0. Just as slice(), if you do not provide a second argument to substring() it will slice out the rest of the string.

Substr

substr() is similar to slice() the only difference is that the second argument represent the length of the part we want to slice out.

let str = "Slice this string";
let strSubstr = str.substr(11, 3);
console.log(str); //Slice this string
console.log(strSubstr); //str

Enter fullscreen mode Exit fullscreen mode

toUpperCase toLowerCase and concat

The method toUpperCase() converts a string to upper case and the method toLowerCase() converts a string to lowercase.

let str = "Slice this string";
let strUpperCase = str.toUpperCase();
console.log(str); //Slice this string
console.log(strUpperCase); //SLICE THIS STRING

Enter fullscreen mode Exit fullscreen mode
let str = "SLICE THIS STRING";
let strUpperCase = str.toLowerCase();
console.log(str); //SLICE THIS STRING
console.log(strUpperCase); //"slice this string"
Enter fullscreen mode Exit fullscreen mode

concat() joins two or more strings together

let str1 = "Hi I am";
let str2 ="John Doe";
let str3 = str1.concat(" ", str2);
console.log(str3); //"Hi I am John Doe"
Enter fullscreen mode Exit fullscreen mode

trim trimStart and trimEnd

The trim() method eliminates whitespace from both ends of a string, trimStart() removes whitespace from the beginning of a string and trimEnd() removes whitespace from the end of the string.

let str = "    I am a string    ";
let str1 = str.trim();
let str2 = str.trimStart();
let str3 = str.trimEnd();

console.log(str1); //"I am a string"
console.log(str2); //"I am a string    "
console.log(str3); //"    I am a string"
Enter fullscreen mode Exit fullscreen mode

charAt charCodeAt and split

charAt() returns the character at the index that was passed as argument.

let str = "String";
let char = str.charAt(3);
console.log(char);//i
Enter fullscreen mode Exit fullscreen mode

charCodeAt() returns the unicode of the character at the index that was passed as argument.

let str = "String";
let char = str.charCodeAt(3);
console.log(char);//105
Enter fullscreen mode Exit fullscreen mode

split() converts a string to an array.

let str = "String";
let strArr = str.split("");
console.log(strArr); //["S","t","r","i","n","g"]
Enter fullscreen mode Exit fullscreen mode

These aren't the only string methods in JavaScript, you'll encounter more string methods while programming.

Top comments (0)