๐Ÿ”ฅ NEW Code Tidbit Every Week ๐Ÿ”ฅ

# String startsWith() Method in JavaScript

If you ever need to check if a string begins with another string, use ES6's startsWith method. I really like this method because intuitively it's so comprehensive. Even if you don't know have any tech background, just by reading the code, you can more easily deduce what's happening in comparison to indexOf ๐Ÿค“

I really like the direction JavaScript is going. Not just introducing all these helpful methods, but evolving the language to be more human readable. This is how we make tech more accessible. Make it easier to learn. Love it! ๐Ÿ˜

const lunch = '๐Ÿฅ— ๐Ÿฅช ๐Ÿฎ';

// Old Way
lunch.indexOf('๐Ÿฅ—') === 0; // true

// โœ… ES6 Way
lunch.startsWith('๐Ÿฅ—'); // true

# startsWith() Parameters

The startsWith method accepts 2 parameters:

  1. Search Value
  2. Starting Index

# 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.startsWith('S'); // true
name.startsWith('M'); // false

# Multiple Characters

const name = 'Samantha Ming';

name.startsWith('Sam'); // true
name.startsWith('Min'); // false

# Multiple Words

const name = 'Samantha Ming';

name.startsWith('Samantha M'); // true
name.startsWith('antha Min'); // false

# Entire String

const name = 'Samantha Ming';

name.startsWith('Samantha Ming'); // true

# Exceeding String's Length

const name = 'Samantha Ming';

name.startsWith('Samantha Ming is the best'); // false โ† ๐Ÿ˜…

# 2. Starting Index

So by default, your starting index is going to be 0. But with this parameter, you can make it start at a different starting position. Let's take a look at a few examples.

# Default Index (0)

const name = 'Samantha Ming';

name.startsWith('S'); // true
name.startsWith('S', 0); // true

# Start at the 1st index

For those new to programming. Please note that JavaScript is zero-based. Meaning the count begins at 0. So the first character is at 0 index, the second character is at 1 index ๐Ÿค“

const name = 'Samantha Ming';

name.startsWith('am', 1); // true
name.startsWith('am'); // false

# Start at the 2nd index

Following our zero-based counting, the 2nd index is equal to the 3rd character.

const name = 'Samantha Ming';

name.startsWith('ma', 2); // true
name.startsWith('ma'); // false

# Negative Starting Index

So negative index won't work. I was trying to be clever to test if negative index would work similarly like slice() where if you pass a negative index, it would be the last character. Proof again, don't think you can outsmart JavaScript ๐Ÿ˜‚

const name = 'Samantha Ming';

name.startsWith('g', -1); // false

I guess that's what endsWith is for. I'll cover this in a future tidbit ๐Ÿ˜œ

# Case Sensitive

One important thing to keep in mind is the startWith method is case sensitive.

const name = 'Samantha Ming';

name.startsWith('sam'); // false

# Browser Support

This is supported by all modern browser. Except for .... I'm sure you guessed it -- no Internet Explorer ๐Ÿ˜‘. You will need to use a Polyfill or a compiler like Babel.

Browser Support

# Community Inputs

๐Ÿ’ฌ What other way do you know of checking if a string begins with something?

This is the question I asked the community. Got some really good ones. Let's take a look ๐Ÿ‘€

const lunch = '๐Ÿฅ—๐Ÿฅชโ˜•๏ธ';
const search = '๐Ÿฅ—';
lunch.slice(0, search.length) === search;

Thanks: @abraham

# Using Regex

'some string'.match(/^some/);

// OR
/^some/.test('some string');

Thanks: @cpt_silverfox

# Using Bracket

If you're just checking for one singular character, you can try this. But note when you have more than character (ie. hel), this method won't work.

const word = 'hello';

word[0] === 'h';

Thanks: @neutrino2211

# Performance Check

@gwardwell: Hereโ€™s one such test (found on JSPerf, I didnโ€™t author it) that would indicate indexOf blows startsWith away.

# Resources


Related Tidbits