String endsWith() Method in JavaScript

String endsWith() Method in JavaScript

Need to know if a string ends with something? Simple, use #ES6 "endsWith" method. You don't even need to be a developer and you can guess what's going on.

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:

  1. Search Value
  2. 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!

Follow us on Facebook | Twitter

Further reading about JavaScript

☞ The Complete JavaScript Course 2019: Build Real Projects!

☞ Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex)

☞ JavaScript Bootcamp - Build Real World Applications

☞ The Web Developer Bootcamp

☞ JavaScript Programming Tutorial - Full JavaScript Course for Beginners

☞ New ES2019 Features Every JavaScript Developer Should Know

☞ Best JavaScript Frameworks, Libraries and Tools to Use in 2019

☞ React vs Angular vs Vue.js by Example

☞ Microfrontends β€” Connecting JavaScript frameworks together (React, Angular, Vue etc)



Angular 9 Tutorial: Learn to Build a CRUD Angular App Quickly

What's new in Bootstrap 5 and when Bootstrap 5 release date?

Brave, Chrome, Firefox, Opera or Edge: Which is Better and Faster?

How to Build Progressive Web Apps (PWA) using Angular 9

What is new features in Javascript ES2020 ECMAScript 2020

JavaScript ES6 Classes

An exciting new construct that was introduced in the ES6 specification is the ES6 classes. If you're a Javascript developer, you will be aware that Javascript follows prototypal inheritance and sometimes it can get a little messy. However, with ES6 classes the syntax is simpler and much more intuitive.

Linked Lists in JavaScript With ES6

Linked Lists in JavaScript with ES6.This series is about data structure implementation in JavaScript using the ES6 specification.. Let's see how to make a singly linked list in Javascript… ... list in Javascript. We'll be using ES6 syntax throughout.

An Introduction to JavaScript ES6 Proxies

Proxy is one of the most overlooked concepts introduced in ES6 version of JavaScript, but ES6 proxies bound to come in handy at some point in your future.