To clarify a few things, you can sometimes access an object directly without having to create a variable. We saw how to do this with the number object, but with the string object we can’t do this. This is because the string object depends on a value in order to use it’s methods and properties.
String Object Properties
Clear your script and add this bit of code.
var str = 'This is a string';
document.write( str.length + '<br>' );
The string object doesn’t have too many useful properties. The only property you’ll ever need is the length of the string. To access the length, you use the property length. Refresh your page and you should get 16. Spaces and special characters are also included in the length.
String Object Methods
The string object has a handful of useful methods to use. We’ll go over each one in detail. Add this bit of code into your script
document.write( str.charAt( 5 ) + '<br>' );
document.write( str.concat( '<br>' ) );
document.write( str.replace( 'string', 'cupcake' ) + '<br>' );
document.write( str.slice( 0, 4 ) + '<br>' );
document.write( str.substr( 0, 4 ) + '<br>' );
document.write( str.trim() + '<br>' );
document.write( str.toUpperCase() + '<br>' );
document.write( str.toLowerCase() + '<br>' );
These are quite a bit of methods. Here’s what each one does. Like always, in order to access these methods, we use dot notation after the str variable..
- charAt() – This method returns a character in the string. To specify which character you would like returned, you simply input the number and it’ll search for it. The first character in a string is always 0. If you were to count the characters in your string, then the 5th character would be i. This is what should be outputted into the document.
- concat() – This works similar to the plus sign. It combines 2 strings together. There is no advantage to either one. It’s all preference.
- replace() – This will search for a phrase or character in the string and replace it with a new value. The first parameter is what you want to search for. The second parameter is what you want to replace it with.
- slice() – This method will return a new string with a different start and finish. The first parameter accepts where you would like to start. In our case, we want to start at the beginning. The second parameter accepts the ending. In our case, we want it to end at the 4th character. So, any characters between 0 and 4 will be returned. Everything else is omitted.
- subtr() – This method almost does the same thing as the slice() method except instead of an ending, the second parameter accepts the length. So, it’ll grab characters from 0 and 4 characters after that.
- trim() – This method removes any extra white space in a string. So, if you had a string with A LOT of white space, this method will remove it for you and make it more readable.
- toUpperCase() – This method converts all the characters in a string to uppercase letters.
- toLowerCase() – This method converts all the characters in a string to lowercase letters.
After all these methods, you should get the following output.
This is a string
This is a cupcake
This is a string
THIS IS A STRING
this is a string
You’ll notice that regardless of what we do to the original string, it’s only temporarily modified. These methods will only modify the string and then return the modified version. The original is always in tact. If you wanted to update the string then you would do something like this.
str = str.toLowerCase();
So, if you want to use the modified string later, remember to save it.
There are more methods and properties out there, but these are some of the important ones. If you would like more information about the string object, then go here.