Javascript | What is ES6? — String updates

Strings are arguably one of the most important data types in programming. They’re in nearly every higher-level programming language, and being able to work with them effectively is fundamental for developers to create useful programs.

JavaScript strings have always lagged behind similar features of other languages. It was only in ECMAScript 5 that strings finally gained a trim() method, for example, and ECMAScript 6 continues extending JavaScript’s capacity to parse strings with new functionality.

String Inspection Functions or Substrings

Before ECMAScript 6 we have traditionally used inedxOf() method to identify strings inside other strings.

ECMAScript 6 includes the following three methods, which are designed to do just that:

1. includes() - The includes() method returns true if the given text is found anywhere within the string. If it is not found, it returns false.
2. startsWith() - The startsWith() method returns true if the given text is found at the beginning of the string. If it is not found, it returns false.
3. endsWith() - The endsWith() method returns true if the given text is found at the end of the string. If it is not found, it returns false.

Each methods accept two arguments: the text to search for and an optional index from which to start the search.

When the second argument is provided, includes() and startsWith() start the match from that index while endsWith() starts the match from the length of the string minus the second argument; when the second argument is omitted, includes() and startsWith() search from the beginning of the string, while endsWith() starts from the end. In effect, the second argument minimizes the amount of the string being searched.

var msg = "Hello world!";

console.log(msg.startsWith("Hello"));       // true
console.log(msg.endsWith("!"));             // true
console.log(msg.includes("o"));             // true

console.log(msg.startsWith("o"));           // false
console.log(msg.endsWith("d!"));            // true
console.log(msg.includes("z"));             // false

console.log(msg.startsWith("o", 4));        // true
console.log(msg.endsWith("o", 8));          // true
console.log(msg.includes("o", 8));          // false

Here is the JSBIN for the same:

https://jsbin.com/jatekiw/edit?html,console

The first six calls don’t include a second parameter, so they’ll search the whole string if needed. The last three calls only check part of the string.

The call to msg.startsWith("o", 4) starts the match by looking at index 4 of the msg string, which is the “o” in “Hello”.

The call to msg.endsWith("o", 8) starts the match at index 4 as well, because the 8 argument is subtracted from the string length (12).

The call to msg.includes("o", 8) starts the match from index 8, which is the “r” in “world”.

While these three methods make identifying the existence of substrings easier, each only returns a boolean value. If you need to find the actual position of one string within another, use the indexOf() or lastIndexOf() methods.

The startsWith(), endsWith(), and includes() methods will throw an error if you pass a regular expression instead of a string.

This stands in contrast to indexOf() and lastIndexOf(), which both convert a regular expression argument into a string and then search for that string.

The repeat() Method

In languages like Python and Ruby, you can repeat a string as:

"foo" * 3;                          // "foofoofoo"

That doesn’t work in JS, because * multiplication is only defined for numbers, and thus "foo" coerces to the NaNnumber.

However, ES6 defines a string prototype method repeat(..) to accomplish the task. ECMAScript 6 adds a repeat() method to strings, which accepts the number of times to repeat the string as an argument. It returns a new string containing the original string repeated the specified number of times. For example:

console.log("x".repeat(3));         // "xxx" console.log("hello".repeat(2));     // "hellohello" console.log("abc".repeat(4));       // "abcabcabcabc"

Here is the JSBin for the above: https://jsbin.com/jatekiw/edit?html,console

This method is a convenience function above all else, and it can be especially useful when manipulating text. It’s particularly useful in code formatting utilities that need to create indentation levels, like this:

// indent using a specified number of spaces
var indent = " ".repeat(4),
    indentLevel = 0;

// whenever you increase the indent
var newIndent = indent.repeat(++indentLevel);

The first repeat() call creates a string of four spaces, and the indentLevel variable keeps track of the indent level.

Then, you can just call repeat() with an incremented indentLevel to change the number of spaces.

If you enjoyed reading, make that heart go green! Recommend it to friends and of course, let me know if you have any feedback.

You can also join my slack community.

Do checkout http://www.programmingbuddy.club

Exercises for Practice: (optional)

Exercise 1:

Create a new String with the text “Join the ‘Happy Learning’ Team in slack” and do the following: For all of these, just use above methods and do a console.log of the test.

1. Check if the string starts with “Join”?
2. Check if the string starts with “Happy”?
3. Check if the string ends with “Learning” ?
4. Check if the string ends with “slack” ?
5. Check if the string includes “Join Now” ?
6. Check if the string includes “Happy Learning”?
7. Check if the string starts with “Happy” starting with position 10?
8. Check if the string ends with “Learning” starting with position 10?
9. Check if the string includes “Happy Learning” starting with position 4?

Solution

Exercise 2:

Create a text output as “Hello…How..are…you..you….you???” using the repeat() method. You can create and use these constants.

const hello = “Hello”;
 const how = “How”
 const dot = “.”;
 const are = “are”;
 const you = “you”;
 const question = “?”;

Solution