Javascript Strings: Miscellaneous Tidbits

Disclaimer: This material was taught in The Modern Javascript Bootcamp Course by Colt Steele and Stephen Grider, which I highly recommend.

I had the good fortune of attending the Flatiron School as a Software Engineering Student. From Ruby to Objected Oriented Programming to DOM Manipulation to React, we went through many concepts very quickly, and, ultimately, sprinted through Javascript basics in roughly ten days. This article will summarize many small details regarding Javascript strings that I did not fully understand while enrolled as a Bootcamp student.

With respect to adding strings, I understood that you can use + or .concat(). I also knew that if you add a string with a number, you will get a string (“hi” + 1 returns “hi1”). However, I did not know that if you subtract a string by a number, you will get Not a Number (“hi” - 1 returns NaN). I vaguely knew (which means that I had to look up every time that I encountered it) that strings have the length property. Also, you can look up the index of a string akin to looking up an index of an array. And, just like with arrays, if you look up a string’s index that does not exist, your return will be undefined. One operation that I did not know could be used on a string is .indexOf(). It works on the string in a fashion similar to the elements of an array, starting at 0 and going through each character until .indexOf() finds a match. If there is a match, .indexOf() returns the first index that matches, and if there is not a match, it returns -1. To summarize (return values are commented out //):

There are many operations that you can perform on a string: .toUpperCase(), .toLowerCase(), .trim(), .etc.. Check out MDN’s String page to find a full list of all the operations that you can perform on a string (on the left-hand column under the “methods” section). Note that a thumbs down next to a method means that the operation is “deprecated” — that it should no longer be used, though it probably still works.

From MDN’s String page. List of methods on left-hand column.

However, when an operation is performed on a string, it does not change the value of that string because strings are immutable in Javascript.

Additional operations that you can use on a string are .slice() and .replace(). When using .slice(), you can enter a parameter of the starting index of the string as well as a second parameter that represents the index before which to end the operation. That is, .slice() will operate up to, but not including the end parameter. For example, .slice(2, 5) will extract from the third element (remember that 0 is the first element) up until, but not including, the fifth element. “apples”.slice(2,5) will return “ple”.

From MDN’s String.prototype.slice() page. Note that both parameters are technically optional as notated by the [] around them.

You can also use the .replace() method to search the string for a value or a regular expression (patterns used to match character combinations in strings) and return a new string where the specific values are replaced.

From MDN’s String.prototype.replace() page.

Note that if you are replacing a value (and not a regular expression), only the first instance of the value will be replaced. You can also enter an empty string, “”, in the second parameter to remove the value from the string.

On a separate note, you can use backslashes to help with handling quotes inside of a string. Specifically, backslashes can insert quotes into a string (with either \’ or \”). You can also place single quotation marks inside of a string that used double quotation marks to notify that the code is a string and vice versa. To jump down a line in your String, you can use backslash and n (\n). If you want to have a backslash in your string, enter two backslashes together (\\):

The last tidbit that I learned after Bootcamp was that each character in a string has a Unicode code point — a way to represent the character as a number. The first 128 Unicode code points are a direct match of the ASCII character encoding. When comparing different strings and considering one greater than or less than the other, we must follow the numeric values for each character as represented by their Unicode code point.

ASCII Table

Uppercase letters have a lower ASCII than lowercase letters. Thus, “A” < ‘a’ will return as true.

In the end, there is so much I missed out on regarding the fundamentals of Javascript. So do not worry if you are attending a Coding Bootcamp and feel overwhelmed about missing details. You will always be learning, just enjoy the process.