Useful JavaScript Tips — Checking Strings and Styling Elements
By: John Au-Yeung
Tags: Programming, Technology, JavaScript, Software Development, Web Development

Photo by Zdeněk Macháček on Unsplash

Like any kind of apps, JavaScript apps also have to be written well.

Otherwise, we run into all kinds of issues later on.

In this article, we’ll look at some tips we should follow to write JavaScript code faster and better.

Get the Last Occurrence of a Substring in a String

The lastIndexOf method returns the index of the last occurrence of a substring in a string.

For instance, we can write:

'jane, joe, and joe'.lastIndexOf('joe')

Then we get 15.

It returns -1 if the substring isn’t found.

Get the First Occurrence of a Substring in a String

The indexOf method returns the index of the first occurrence of a substring in a string.

For instance, we can write:

'jane, joe, and joe'.indexOf('joe')

Then we get 6.

It returns -1 if the substring isn’t found.

Check if a Substring is in a String

We can check if a substring is in a string with the includes method.

For instance, we can write:

'jane, joe, and alex'.includes('joe')

Then it returns true .

Otherwise, if we have:

'jane, joe, and alex'.includes('foo')

then it returns false .

It also takes a second argument to indicate which index we want to start the search.

For example, we can write:

'jane, joe, and alex'.includes('joe', 10)

then it returns false .

Check if a String Ends with a Substring

The endsWith method lets us check if a string ends with a substring.

For example, we can write:

'jane, joe, and alex'. endsWith ('alex')

then it returns true .

We can also pass in an integer to search for a substring with the given length of the string.

For example, we can write:

'jane, joe, and alex'. endsWith ('alex', 5)

Then it returns false since 'alex' isn’t in the first 5 characters of the string.

Combining 2 or More Strings

The concat method lets us combine 2 or more strings.

For instance, we can write:

'jane'.concat(' ', 'smith');

to get 'jane smith' .

Also, we can write:

'jane'.concat(' ').concat('smith');

to get the same thing.

Get the Unicode Character Code of a Character

The charCodeAt method lets us get the character code of a character./

For instance, if we have:

'a' .charCodeAt(0)

Then we get 97 .

We can also use the codePouintAt method:

'a' .codePointAt(0)

to get the same result.

Get a Character from a String by Index

The charAt method lets us get the character by its index.

For example, we can write:

'jane'.charAt(0)

to return 'j' .

Find the Location of a Substring that Matches a Given Pattern

The search method lets us search for a substring with the given pattern.

For instance, we can write:

'jane, joe, and alex'. search ('jane')

Then we get 0.

We can also search with a regex.

For example, we can write:

'jane, joe, and alex'.search(/\b[a-z]{3}\b/)

Then we get 6.

If no match is found, then -1 is returned.

Replace a String with the Given Pattern with Another String

The replace method lets us replace a substring with the given pattern with the given substring.

For instance, we can write:

'jane, joe, and alex'.replace(/\b[a-z]{3}\b/, 'may')

Then we get “jane, may, and alex” .

List All Methods of an Object

We can get all the methods of an object with Object.keys and the typeof operator.

For example, we can write:

const getMethods = (obj) => Object.keys(obj).filter(key => typeof obj[key] === 'function')

Object.keys only get noninherited string properties of an object.

So if we have:

const person = {

name: 'james',

eat() {},

drink() {}

}

Then we can call getMethods by writing:

getMethods( person)

And get [“eat”, “drink”] .

Style a DOM Element

We can style an element in various ways.

We can add or remove classes from an element.

Also, we can add inline styles to it.

Given that we have the following element:

const element = document.querySelector('#foo')

We can use the classList property of the element to add and remove classes:

element.classList.add('fancy')

element.classList.remove('fancy')

Also, we can access the style property as follows.

We can write:

element.style.color = 'green';

Adding and removing classes are preferred because it’s faster than changing styles on the fly.

Photo by John Mccann on Unsplash

Conclusion

We can add styles to an object by using the styles property.

The classList property lets us add or remove classes from an element.

There are string methods to get the info we need from a string.

Also, we can replace and search for substrings.

JavaScript In Plain English

Did you know that we have four publications and a YouTube channel? Find them all at plainenglish.io and subscribe to our YouTube channel!