JavaScript: String Objects

Home / JavaScript: String Objects

JavaScript: String Objects

December 11, 2015 | Article | No Comments

This article is a supplement for Compact Tutorial on JavaScript Basic.

We can create a string primitives by giving them some characters to hold.

var myPrimitiveString = "Xathrya Sabertooth";

A String object does things slight differently, not only allowing us to store characters, but also providing a way to manipulate and change those characters.

Creating String Object

Declaring a new variable and assign it a new string primitive to initialize it. Now we try using typeof() to make sure data in the variable myPrimitiveString:

<HTML>
<BODY>
<SCRIPT type="text/javascript">
    var myPrimitiveString = "Xathrya Sabertooth";
    document.write (typeof(myPrimitiveString));
</SCRIPT>
</BODY>
</HTML>

We can still use the String object’s methods on it, though. JavaScript will simply convert the string primitive to a temporary string object, use the method on it, and then change the data type back to string. Now let’s try out using the length property of the String object.

<HTML>
<BODY>
<SCRIPT type="text/javascript">
    var myPrimitiveString = "Xathrya Sabertooth";
    document.write ( typeof( myPrimitiveString ) );
    document.write ( "<br>" );
    document.write ( myPrimitiveString.length );
    document.write ( "<br>" );
    document.write ( typeof( myPrimitiveString ) );
</SCRIPT>
</BODY>
</HTML>

Which should give this result:

string
18
string

So, myPrimitiveString is still holding a string primitive after the temporary conversion. You can also create String objects explicitly, using the new keyword together with the String() constructor.

<HTML>
<BODY>
<SCRIPT type="text/javascript">
    var myObjectString = new String("Xathrya Sabertooth");
    document.write ( typeof( myObjectString) );
    document.write ( "<br>" );
    document.write ( myObjectString.length );
    document.write ( "<br>" );
    document.write ( typeof( myObjectString) );
</SCRIPT>
</BODY>
</HTML>

Which should give this result:

object
18
object

The only difference between this script and the previous one is the myObjectString is a new object, created and supplied with some characters.

var myObjectString = new String("Xathrya Sabertooth");

The result of checking the length property is the same whether we create the String object implicitly or explicitly. The only real difference is that creating string object explicitly is marginally more efficient if we’re going to be using the same String object again and again. Explicitly creating String objects also helps prevent the JavaScript interpreter getting confused between numbers and strings, as it can do.

String Object’s Methods

The String object has a lot of methods, so we will limit to two of them: indexOf() and substring() methods. The more complete list of String object’s properties and methods can be found at the handout section.

String is made of characters (it is sequence of characters). Each of these characters is given an index, zero-based index. So the first character’s position has the index 0, the second is 1, and so on. The method indexOf() finds and returns the position in the index at which a substring begins (and the lastIndexOf() method returns the position of last occurrence of the substring).

We can use this method for example, checking the position (and existence) of symbol @ in our entry when we ask user to input email address. No guarantee that the email address is valid, but at least it would go some way to that direction.

We will use prompt() function to obtain the user’s e-mail address and then check the input for the @ symbol, returning the index of the symbol using indexOf().

<html>
<body>
<script type="text/javascript">
    var userEmail= prompt("Please enter your emailaddress ", "" );
    document.write( userEmail.indexOf( "@" ) );
</script>
</body>
</html>

If the @ is not found, -1 is written to the page. As long as the character is in string, the indexOf() will return the index, something greater than -1.

The substring() method carves one string from another string. It takes index of start and end position of the substring as parameters. We can return everything from the first index to the end of the string by leaving off the second argument.

So, to extract all the character from the third character (at index 2) to the sixth character (index 5), we can write as:

<html>
<body>
<script type="text/javascript">
    var characterName = "I am Xathrya Sabertooth";
    var lastNameIndex = characterName.indexOf( "Xathrya " ) + 8;
    var lastName = characterName.substring( lastNameIndex );
    document.write( lastName );
</script>
</body>
</html>

We are extracting Sabertooth from the stirng in the variable characterName. We first find the start of the first name and add it with 8 to find the index of the first name (because “Xathrya ” is 8 characters long). We use indexOf here. The result is stored on lastNameIndex. Using that value, we extract the substring of lastname, form lastName Index to unspecified final index. The rest of the characters in the string will be returned.

Handouts

  1. JavaScript String Properties and Methods List (PDF)

,

About Author

about author

xathrya

A man who is obsessed to low level technology.

Leave a Reply

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

Social media & sharing icons powered by UltimatelySocial