Home Web Development JavaScript Essential JavaScript String Methods

Essential JavaScript String Methods

The 13 most important JavaScript functions for working with strings. Index, slice, split, and trim your way through JS strings methods.

Strings are a fundamental part of every programming language, and JavaScript has many powerful built-in functions that make working with strings easy for developers. This list covers the most important string functions for you to begin utilizing in your code.

.length — Finding the length of the string

This one may seem obvious, but it is likely the most important string method and undoubtedly the most commonly used one. Calling .length on a string will return the number of character that the string contains.

.trim() — Removing white space

The trim() function removes white space from the beginning and end of a string. You will find yourself using this one most often when processing the string of a user input field. It is easy to accidentally add spaces, and this ensures you handle the relevant characters.

.includes() — Determine if string contains substring

The includes() function determines if a substring is contained in a larger string and returns true or false. This has many applications, but one common use-case is for string matching for searching/parsing.

.indexOf() — Finding the index of a substring

Before includes() was introduced to the JavaScript spec, indexOf() was the primary way you would check if a substring existed in a string. It is likely you will still see code that uses indexOf, so understanding how it works is important. The function returns the index of the substring within the string. If the substring is not contained in the original string, it will return -1.

The common pattern for indexOf() which mimics the behavior of includes() which is to check if the index is greater than -1:

.toUpperCase() — Capitalizes entire string

The toUpperCase() function returns a string with all upper case letters.

.toLowerCase() — Lower cases entire string

The toLowerCase() function returns a string with all lower case letters.

.replace() — Replaces strings with new values

The replace() function is called on a string and will return a string with a pattern replaced by a replacement string. It takes either a regex or a string as the pattern. With a regex you can globally replace all matches (using the g option), but with a string it will only replace the first occurrence. In the example below, you will notice that world is replaced only once in the first call since it uses a string pattern.

.slice() — Return a section of a string

The slice() method will extract a section of a string based on the index supplied and return it as a new string. This is useful when you know the structure of a string and want to retrieve a certain portion, or it can be used with the indexOf method which we learned earlier where you can find the index of the first occurrence of a substring and use that as a reference point for slicing.

slice() takes the beginning index as the first parameter and an optional ending index as the second parameter — str.slice(beginIndex[, endIndex]). If no ending index is supplied, it slices to the end of the string starting with your beginIndex. If a negative beginIndex is used, it will slice backwards from the end of the string. The following is an example from MDN which depicts these cases.

.split() — Converts string into an array of strings

The split() method takes a separator which you want to split apart the string on, and it returns an array of strings. This is useful when you know your string uses a certain character to separate data, or if you want to operate on specific substrings individually.

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

The repeat() function returns a string consisting of the elements of the object repeated the given number of times.

.match() — Returns array of matching strings

The match() method retrieves the matches when matching a string against a regular expression. The example below searches our string for all capital letters. It returns an array of strings for the values that match the regex.

.charAt() — Returns the character at an index

The charAt() function returns the string character at a given index.

.charCodeAt() —Return the unicode at an index

The charCodeAt() method returns the unicode of the character at a specified index in a string. This an UTF-16 cone integer between 0 and 65535.

This list covers an essential list of string methods used in JavaScript. . Methods not covered in this list include lastIndexOfsearchsubstringsubstrconcatlocaleCompare, and others. It’s not that these functions are not important, but they are not core methods utilized in JavaScript, and you are much less likely to see or need them. For a more comprehensive list, refer to the MDN string documentation.


Please enter your comment!
Please enter your name here

- Advertisment -

Most Popular

Auto Detect Responsive Screen Sizes in Angular

Most of the time, we use CSS media queries to handle responsive, screen size changes to layout our content differently. However, there...

Angular 9 CRUD | Part 8 |Delete an Existing Product

In this article, I am going to show you how to delete a product. Create a method...

Angular 9 CRUD | Part 7 | Update an Existing Product

In this article, we will update the existing product details. Here we are using reactive forms and HttpClient for updating the...

Angular 9 CRUD | Part 6 | Create New Product

In this article, we will create a new product. Here we are using reactive forms for creating a new product. first...

Recent Comments

Sathish Kumar Ramalingam on Angular 2 Admin LTE Theme Integration