(click anywhere to close)

[JavaScript] String Manipulation

category: Website | course: JavaScript | difficulty:

Strings are just as important and fundamental as Numbers, and therefore require the same set of operators. But, because there’s nothing such as dividing or multiplying a string, JavaScript offers a wide range of methods to apply to strings. Adding strings together, however, does exist as a natural operation, which can create a lot of confusion (as you’ll see).

One important thing to notice is that all string methods don’t actually change the arguments you supply, just like the Math methods. They simply use the arguments to return the value you want.

String Addition

To add together strings, you can use the + operator.

var x = "Hello " + "World!"; //x is "Hello World!"

But, this operator is also available for numbers, so what happens if not all values are the same? In that case, all values in the operation are converted to strings and added together.

var x = "Hello Guest " + 15 + "!"; //x is "Hello Guest 15!"

The alternative is the concat(string1, …, stringn) method. It adds the strings you give it to the end of the string you perform it on.

var x = "Hello ";
var y = x.concat("Awesome ","World!"); //y is "Hello Awesome World!"

String Subtraction

To remove parts of a string, or select only certain parts, we have 4 methods. One very important thing to notice, is that when it comes to counting characters, we start at index 0. So the first character of a string is said to be at position 0, and the last one at position (length – 1). It might seem odd at first, but you’ll get used to it soon.

The method slice(start, end) returns the characters of a string between start and end (both inclusive). If you supply a negative argument, it will count from the end of the string towards the start.

var x = "Hello World!".slice(1,5); //x is "ello"
x = "Hello World!".slice(-6,-1); //x is "World"

The method substring(start, end) is similar to slice, but doesn’t accept negative values. Also, if you don’t supply the second parameter, it will slice until it reaches the end of the string.

var x = "Hello World!".substring(1); //x is "ello World!"

The method substr(start, length) returns the characters between start and (start + length), both inclusive. It’s useful if you know the exact length of the string you want to cut out.

var x = "Hello World!".substr(0,5); //x is "Hello"

The method trim() removes all whitespace (“empty string”) from both ends of a string.

var x = "     LOVE     ".trim(); //x is "LOVE"

String Multiplication

Multiplying a string means increasing or decreasing the size of all letters. More specifically, this means converting the whole string to uppercase or lowercase.

For this, we have the toLowerCase() and toUpperCase() methods.

var x = "Hello World!".toLowerCase(); //x is "hello world!"
x = "Hello World!".toUpperCase(); //x is "HELLO WORLD!"

String Division

Dividing strings means chopping it up into a lot of smaller strings, that, combined together, form the original string again. This is done with the split(separator) method, which returns an Array. We’ll look at what those are later, but for now just know that it’s a list of values. In this case, it’s a list of strings. The separator is the string we want to use to determine where one piece stops and another starts.

var x = "I want an ice cream!".split(" "); //x is split into the strings ['I',"want","an","ice","cream"]

Finding Strings within Strings

Checking whether a certain string contains another one needs to be done very often.

If you know the specific string you’re looking for, you can find the position of the first letter of the string you're looking for. Use indexOf(string, start) to find the first occurrence, and lastIndexOf(string, start) to find the last occurrence. The start argument specifies from which index to start searching, but can be omitted if you just want to start from the beginning. If the string can’t be found, it returns -1.

var x = "I want an ice cream!".indexOf("want"); //x is 2

If you want to know the character at a certain position in the string, use charAt(index). Remember that JS starts counting from zero.

var x = "Hello World!".charAt(2); //x is 'l'

If you don’t know the literal string you’re looking for, you have to use regular expressions. Those are, however, far too complex to explain now and will be explained in their own chapter.

The method search(RegExp, start) does the same as indexOf, but works with a regular expression. Below is a very simple example:

var x = "Hello World!".search("Hello"); //x is 0
var x = "Hello World!".search(/Hello/); //x is 0

The method match(RegExp) doesn’t return the position of a match, but a list of the actual matches. (An Array, remember?)

var x = "Hello hey hey!".match(/\s/i); //this expression matches against all whitespace characters, which means x is [" "] 

Replacing Strings

And finally, you can swap parts of a string with other strings. Use the method replace(RegExp | String, replacement), where the first parameter can be a plain old string, as well as a regular expression. It replaces the first occurrence of the first parameter with the replacement string provided in the second. With a Regular Expression, however, you can make it replace every occurrence (and more).

var x = "Hello World!".replace("l","z"); //x is "Hezlo World!"
x = "Hello World!".replace(/l/g,"z"); //x is "Hezzo Worzd!"
Do you like my tutorials?
To keep this site running, donate some motivational food!
Chocolate Milk