DEV Community

Chloe
Chloe

Posted on • Originally published at cgweb.co.uk on

JavaScript String methods

I thought I'd put together a post on some commonly used methods for strings.

  • indexOf - this method returns the index of the specified search term. If multiple versions it will give the index of the first instance and will return -1 if the search term cannot be found. This method can be used for arrays which are also zero indexed. This method is case-sensitive
const myStr = 'Monday is the first day of the week';
myStr.indexOf('w') // returns 31
myStr.indexOf('first') // returns 14
myStr.indexOf('First') // returns -1
Enter fullscreen mode Exit fullscreen mode
  • lastIndexOf - works the same way as the above but starts at the end of the string

  • slice - it takes part of string and returns a new string it does _not_ modify the original. Note it is zero indexed and spaces count as characters.The first parameters is the starting index and the optional 2nd parameter if included is the ending index. Negative numbers will count backwards from the end of the string.

const myString = 'This is a randomly typed string';
myString.slice(8); // returns a randomly typed string
myString.slice(1, 7); // returns his ismyString.slice(-6); // returns string
myString.slice(-6, -4); // returns st
Enter fullscreen mode Exit fullscreen mode
  • toLowerCase - this method will convert values to all lowercase particularly useful when creating anything with searches, comparisons or sorting data
const searchTerm = document.querySelector('#search').value;
searchTerm.toLowerCase();
Enter fullscreen mode Exit fullscreen mode
  • toUpperCase - as above but converts values to uppercase

  • concat - combines the text of 2 strings and return a new string e.g.

const myStr = 'This is a string ';
const myStr2 = 'This is another string '
myStr.concat(myStr) // returns `This is a string This is another string
Enter fullscreen mode Exit fullscreen mode
  • replace - this method as the name suggests will take part of an existing string and replace it.
const myStr = 'This is an example string used for testing purposes';
const myNewStr = 'and this is my replacement string.';
myStr.replace('purposes', myNewStr); // returns This is an example string used for testing and this is my replacement string
Enter fullscreen mode Exit fullscreen mode
  • split - this method turns a string into an array of strings separating it at each occurence of the specified separator e.g.
const myUrlString = `https://www.google.co.uk?blog=newpost&testing=mytest`;myURLString.split('?')[0]; // returns "https://www.google.co.uk"
myURLString.split('?')[1]; // returns "blog=newpost&testing=mytest"
Enter fullscreen mode Exit fullscreen mode
  • length- gives the length of string in characters (note spaces count towards this number)
const myStr = 'This is a new string created for showing an example';
myStr.length; // returns 51
Enter fullscreen mode Exit fullscreen mode
  • trim - another super useful method used to remove any whitespace at the beginning or end of a string

  • match - returns the result of matching a string against regex

With the introduction of ES2015 (ES6) there were some new string methods added to the specification. These methods are:

  • startsWith
  • endsWith
  • includes *All of these can take an optional parameter

startsWith - This method checks whether a strings starts with specific character(s) and will return the according Boolean value. The second parameter is the index of where the search should start.

endsWith - It works as above but checks the end of a string.

let myStr = 'Liverpool FC are the best team in the world!';
myStr.endsWith('world!'); // returns true
myStr.endsWith('?'); // returns false
Enter fullscreen mode Exit fullscreen mode

includes - This method is used to search for a matching string and will return the relevant Boolean value.N.B. this method is case-sensitiveA simple example:

const myString = 'This is a random string!';
const myString2 = 'This is another string!';
myString2.includes(myString); // returns false
myString.includes('random'); // returns true
Enter fullscreen mode Exit fullscreen mode

Cross posting this from ym blog the editor removed all my spacing and screwed up the formatting (it looked fine in vscode?) I've had to spend 10+ mins formatting it properly if anyone knows a way to stop this happening please let me know.

Top comments (0)