String Object

A string is an object it has several properties and methods. A string object contains characters such as numerals, letters and symbols. The characters can be in single or double quotation marks.

A string can also be created using a string literal.


String Literal

<script>
var name="Lilly Robot";
document.write(name);
</script>

Displays



String Object

An instance of a String object can be created using the key word new and the String constructor. In the Object lesson you will learn more about objects and the constructor.


Snytax:

var variableName=new String(argument)


<script>
var bookName= new String("Learn JavaScript");
document.write(bookName);
</script>

Displays




Property

A string has the following properties

  1. constructor
  2. length
  3. prototype

In this lesson we are only going to look at the length property. You will learn more about the constructor and prototype in the Objects sections.

Length Property

The length property returns the total number of characters in a string as an integer. This includes any space between the words. To access the length property we have to use a dot after the name of the object.

Remember! A String is an object.


Syntax

nameOfObject.property

<script>
var myName="Lilly Robort";
document.write("The Length is " + myName.length);
</script>

Displays




Methods

Methods are used when you wnat to carry out certain tasks. The object string has several methods.


charAt()

Returns the character at the given index. The first letter index is [0].

var firstName="lilly"
var surname="robot"
<script>
document.write("firstName.charAt(4) is"
+ firstName.charAt(4) + "<br>"))

document.write("surname.charAt(0) is"
+ surname.charAt(0))
</script>


Displays





charCodeAt()

Returns the unicode value of the character at the given index in a string.

var alp="letters"
<script>
//unicode for l at index [0]
document.write("unicode:"+alp.charCodeAt(0));

//unicode for t at index [2]
document.write("unicode:"+alp.charCodeAt(2));
</script>


Displays





concat()

Joins two or more strings. Let us join the first name Lilly with the surname Robot and give it a new variable name called fullName.

<script>
var firstName="Lilly";
var surname="Robot";
var fullName;
document.write(fullName=firstName.concat(surname));
</script>

Displays



You can concat a number of strings for example firstString.concat(secondString, thirdString...).


<script>
var num1="1,2,3,4,";
var num2="5,6,7,8,";
var num3="9,10,11,12";
document.write(num1.concat(num2,num3));
</script>

Displays





indexOf()

Searches for the character or substring from the begining of the string and returns the index of the first occurrence of the searched character or substring; if not found returns a -1.

Note: Index starts at [0].

<script>
var fruit = "I like eating an apple.";
document.write("Substring apple:"+
fruit.indexOf("apple") + "<br>");

//search for the character z
document.write("No character z returns
"fruit.indexOf("z"));

</script>

Displays



You can specify a posistion in the string where you want the search to start from.

<script>
var fruit = "I like eating an apple.";
//search for character e - start from index 9

fruit.indexOf("character",[ ]);

fruit.indexOf("e",9);
document.write("e index is " + fruit.index("e",9));
</script>

Displays





lastIndexOf()

Searches for the character or substring from the end of the string and returns the index of the last occurrence of the searched character or substring; if not found returns -1.

Note: Index starts at [0].

<script>
var weather = "It rains and rains everyday!";

weather.lastIndexOf("rains");

weather.indexOf("i");

</script>

Displays





toUpperCase()

Converts any lower case text to upper case text.

<script>

var music = "piano, guitar and drums";
document.write(music.toUpperCase());

</script>

Displays





toLowerCase()

Converts lower case text to upper case text.

<script>

var music = "piano,GUITAR AND DRUMS";
document.write(music.toLowerCase());

</script>

Displays





match(regexp)

Searches a string for a match based on a regular expression - returns an array if there is a match and if there is no match returns null.

<script>

var fruit= "apple,banana,orange,pineapple";

document.write(fruit.match(/apple/g));
document.write("mango:"+fruit.match(/mango/g));

</script>

Displays





slice()

The slice() method slices a part of the string - it has a start index and an end index. The end index is optional, if it is not included then it will go up to the end of the string. The slice() method will accept negative indexes.

<script>

var s= "television";

document.write (s.slice(4));
document.write(s.slice(0,4));

</script>

Displays






Note: The end index is up to 4, so it does not include the character v.





substring()

The substring() method returns the characters in a string between the from and to index; it does not accept any negative indexes.

<script>

var s= "The world is your oyster.";

//s.substring(from,[to])
document.write(s.substring(3,16));

</script>

Displays

Note: The end index does not include the last character r.





substr()

The substr() method returns the characters in a string from start to the length of the string. It is similar to the slice method(); the only difference is the second parameter in the substr() method is a length.


<script>

var s= "television";

//substr(start,[length])
document.write(s.substr(4,6));

</script>

Displays





split()

The spilt() method converts the string to an array, based on the delimiter and limit. The limit is an integer and it is optional; it specifies the maximum number of elements to be returned.

<script>

var colors= "red, green, black, blue, yellow";

//split(delimiter,[limit])
document.write(colors.split("," , 3));

</script>

Displays





replace()

The replace() method searches the string and replaces a text with another text.

<script>

var nums= "32,45,56,32";

//replace("replace this text"," with this text")
document.write(nums.replace("32","89"));

</script>

Displays



The above string contains the number 32 at the begining and at the end but the replace() method only found and replaced the 32 at the begining. Hence, if we wanted all the 32's replaced with 89 then it would be best to use the global regular expression match.

<script>

var nums= "32, 45, 56,32";

//replace("regexp","replace text")
document.write(nums.replace(/32/g,"89"));

</script>

Displays





search()

Searches for a match between a regular expression and a string. If found it returns the index of the match or -1 if not found.

<script>

var rm= "This front room needs new curtains.";

// search(regexp)
document.write("index: "+ rm.search(/new/g));

// searching for red
document.write("red index:+ rm.search(/red/g));

// you can search without the regexp
document.write("index: "+ rm.search("room"));

</script>

Displays





Now do the Exercises!