Monday , 20 November 2017
Home / Programming / JavaScript / String Object – JavaScript Tutorial
String Object
String Object

String Object – JavaScript Tutorial

This tutorial is part of the JavaScript tutorial series for beginners. To view the whole list of tutorials available and the order in which you should follow them, then click here.

The string object is another object built in by JavaScript. Whenever you create a string, JavaScript will automatically give it the properties and methods of a string.

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.

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

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..

  1. 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.
  2. concat() – This works similar to the plus sign. It combines 2 strings together. There is no advantage to either one. It’s all preference.
  3. 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.
  4. 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.
  5. 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.
  6. 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.
  7. toUpperCase() – This method converts all the characters in a string to uppercase letters.
  8. toLowerCase() – This method converts all the characters in a string to lowercase letters.

After all these methods, you should get the following output.

i
This is a string
This is a cupcake
This
This
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.

So, if you want to use the modified string later, remember to save it.

Conclusion

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.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String

About Jasko Koyn

Check Also

Try-Catch Statement

Try-catch Statement – Advanced JavaScript Tutorial

The try-catch statement is a unique way to handle errors. When errors occur, usually it …

Leave a Reply

Your email address will not be published. Required fields are marked *

ULTIMATE WORDPRESS DEVELOPMENT COURSE
Want to learn how to create your own custom WordPress plugins and themes? Check out my course!
Get 93% off my course. You'll also learn how to integrate WooCommerce and BuddyPress into your projects. This is a limited time offer
Yes, I would like to get 93% off your course!
No Thanks!
close-link