String endsWith() Method in JavaScript

Originally published at https://www.samanthaming.com

Making a language more human-readable is definitely the way to go

const workout = '🏃 🏋️ 💪';
// Old Way
workout.indexOf(‘💪’, workout.length - ‘💪’.length) !== -1;

// true
// ✅ES6 Way
workout.endsWith(‘💪’);
// true

Parameters

The endsWith method accepts 2 parameters:

Search Value
Length

1. Search Value

This is a required field. Here is where you pass your search value. This can be a single character or longer. Let’s see some examples

Single Character

const name = ‘Samantha Ming’;
name.endsWith(‘g’); // true

name.endsWith(‘n’); // false

Multiple Characters

const name = ‘Samantha Ming’;
name.endsWith(‘ing’); // true

name.endsWith(‘in’); // false

Multiple Words

const name = ‘Samantha Ming’;
name.endsWith(‘tha Ming’); // true

name.endsWith(‘tha M’); // false

2. Length

Here you can specify the length of the string you want it to search. When I first read this, I was quite confused. So let’s try to understand what length is doing here.

First, I want to let you know the length of my first name.

console.log(‘Samantha’.length); // 8

// The last character is ‘a’

Now let’s utilize the length parameter.

const name = ‘Samantha Ming’;
name.endsWith(‘a’, 8); // true

☝️So when I say 8, I’m telling endsWith to grab the first “8” characters of the name string (from left to right). In this case, the first 8 characters of the string. And that will be the string we’re searching with endsWith.

The above example is similar to doing this:

const name = ‘Samantha’;
name.endsWith(‘a’); // true

The reason I said I was confused at first is because I pulled over my knowledge of startsWith, where the second parameter is the starting index. So I assumed the second parameter with endsWith would follow the same pattern and it would be the reverse ending index 😅 That’s why people always say, never “assume”. Just when you think you know, you actually don’t. So be humble and always keep a student mindset

If you’re interested, here’s my code notes to startsWith: Code Notes: startsWith

Case Sensitive

Here’s a knowledge that is similar to startsWith. The endsWith method is also case sensitive.

const name = ‘Samantha Ming’;
name.endsWith(‘G’); // false

name.endsWith(‘g’); // true

Browser Support

Browser support is wonderful! IF you don’t count Internet Explorer (Sorry folks, but I’m sure there is no major shock there)

Browser Support: endsWith

But no problem here’s the polyfill so you can safely use endsWith and still, have it be supported in IE.

MDN Polyfill: endsWith

By the way, if you’re a bit confused about what Polyfill is. Here’s a really good video by Tyler McGinnis.

Compiling vs Polyfills with Babel (JavaScript)

Community Input

What other old ways do you know?

Using Regex

@maxstalker: I could advocate for old way with some curried helper functions with some sprinkle of regexp

const startsWith = pattern => string =>

 new RegExp(^${pattern}.*).test(string);
const endsWith = pattern => string => new RegExp(.*${pattern}$).test(string);
const sports = “🏈🎳⛳⛸”;

console.log(startsWith(“🏈”)(sports)); // true

console.log(startsWith(“⛸”)(sports)); // false
console.log(endsWith(“🏈”)(sports)); // false

console.log(endsWith(“⛸”)(sports)); // true

@maxstalker: Or slightly shorter version, which you can inline whenever needed:

const sports = “🏈🎳⛳⛸”;
// startsWith

console.log(/^🎳./.test(sports)); // false

console.log(/^🏈./.test(sports)); // true
// endsWith

console.log(/.*🎳$/.test(sports)); // false

console.log(/.*⛸$/.test(sports)); // true

Using slice

@maxstalker: Another - a bit convoluted and maybe more theoretical - way to do it would be to compare parts of the strings:

const sports = “⛳🎳🏈⚽🎾”;

const startPattern = “⛳”;

const endPattern = “⚽🎾”;
//startsWith

console.log(sports.slice(0, startPattern.length) === “wrong!”); // false

console.log(sports.slice(0, startPattern.length) === startPattern); // true
// endsWith

console.log(sports.slice(-endPattern.length) === “wrong!”); // false

console.log(sports.slice(-endPattern.length) === endPattern); // true

Using lastIndexOf

const workout = ‘🏃 🏋️ 💪’;
workout.lastIndexOf(‘💪’) === workout.length - ‘💪’.length;

// true

Thanks for reading ❤

If you liked this post, please do share/like it with all of your programming buddies!