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. 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
:
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 😂)
But no problem here's the polyfill so you can safely use endsWith
and still, have it be supported in IE.
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
Resources
- MDN Web Docs: endsWith
- Stack Overflow: endsWith in JavaScript
- Check if string starts with or ends with a given string with JavaScript
- String startswith, endswith and contains Implementation
- Two ways to confirm the ending of a String in JavaScript
Thanks for reading ❤
Say Hello! Instagram | Twitter | Facebook | Blog | SamanthaMing.com