JavaScript Lesson 11: The String Object

Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInEmail this to someone

<Previous Lesson> [Table of Contents] <Next Lesson>

The String object in JavaScript is used to manipulate texts and characters. For example, it can be used to process names, addresses, cell phone numbers, ID, company names, product codes, serial numbers and more. In fact, strings are considered the building block of the JavaScript program, because the program statements or instructions comprise strings and characters.A string is made up of letters , numbers and alphanumeric characters such as #,@,$,!,&,*,\,+,- and more. Similar to the objects mentioned in previous chapters, the string object also operates using various methods. These methods are listed as follows:




11.1 String Methods

toFixed(n)It converts a number into a string by retaining n decimal places.
Example:
var number = 2.2689;
var Num = number.toFixed(2);
Num=2.27

Methods Description
big( ) Add the HTML tags <big></big> to the string displays bigger text.
bold( ) Add the HTML tags <bold></bold> to the string displays bold text.
fixed( ) Add the HTML tags <tt></tt> to the string makes the text appears in typewriter style.
ilatics( ) Add the HTML tags <i></i> to the string displays text in italics.
small( ) Add the HTML tags <small></small> to the string displays smaller text.
sub( ) Add the HTML tags <sub></sub> to the string and displays the text as subscript text.
sup( ) Add the HTML tags <sup></sup> to the string and displays the text as superscript text.
strike( ) Add the HTML tags <strike></strike> to the string and displays the text as strike-through text.
fontcolor(color) Add the HTML tags <fontcolor(color)></font> to the string and displays the text in predefined color.
fontcolor(size) Add the HTML tags <fontcolor(size)></font> to the string and displays the text in predefined size.
toLowerCase( ) Convert string to all lowercase
toUpperCase Convert string to all uppercase
substring(A, B) Extracts the substring starting from position A to position B.
chartAt(index) Returns the character located at position index within the string (index with 0)
concat(text) Add text to the end of the string
toString( ) Returns the greatest integer less than or equal to x
fromCharCode() Convert a Unicode number into a character

The syntax of using the String method is  String.Method, where string can be of any acceptable variable name in JavaScript.

For example,  You can define the following string:

var StudentName=”John Peterson”

and manipulate the string with various methods below:

  • StudentName.toLowerCase( )   converts the string to  john peterson
  • StudentName.toUpperrCase( )  converts the string to  JOHN PETERSON
  • StudentName.bold( )  displays the string as  John Peterson
  • StudentName.italics( )  displays the string as  John Peterson
  • StudentName.sub( )  displays the string as  John Peterson
  • StudentName.sup( )  displays the string as  John Peterson
  • StudentName.strike( )  displays the string as  John Peterson
  • StudentName.substring( 1,6)  display part of the string as  ohn p

The following example demonstrates the usage of String methods .

Example 11.1

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>String Methods</title>
</head>
<body>
<script>
myString="JavaScript Tutorial";

IString=myString.italics();
SString=myString.small();
BString=myString.bold();
BigString=myString.big();
FixString=myString.fixed();
subString=myString.sub();
supString=myString.sup();
strikeString=myString.strike();
colorString=myString.fontcolor("red");
StringSize=myString.fontsize("+3");
LCstring=myString.toLowerCase();
UCstring=myString.toUpperCase();
PString=myString.substring(1,5);
CharString=myString.charAt(8);
concatString=myString.concat(" for you")
SameString=myString.toString();
document.write("<br>Text in Italics : "+IString);
document.write("<br>Smaller Text : "+SString);
document.write("<br>Text in Bold : "+BString);
document.write("<br>Text with bigger characters : "+BigString);
document.write("<br>Text with typewriter style : "+FixString);
document.write("<br>Subscript text: "+subString);
document.write("<br>Superscript text: "+supString);
document.write("<br>Strike-thru text: "+strikeString);
document.write("<br>Red color text: "+colorString);
document.write("<br>Fontsize +3: "+StringSize);
document.write("<br>Convert to lowercase: "+LCstring);
document.write("<br>Convert to Uppercase: "+UCstring);
document.write("<br>Extracts SubString: "+PString);
document.write("<br>Character at 9th position is : "+CharString);
document.write("<br>Concatenates String: "+concatString);
document.write("<br>Same String: "+SameString);
</script>

</body></html>

Click Example 11.1 to see the output

Example 11.2: The fromCharCode() Method

This example demonstrates the usage of the fromCharCode() Method. This method converts a unicode into a corresponding character.

<!DOCTYPE html>
<html>
<body onload="myFunction()">

<h3>The character of unicode <b id="chr"></b> is <b id="chr1"></b></h3>

<script>
function myFunction() {
var ucode = prompt("Please enter a Unicode and click OK to view the corresponding character");
var myChr = String.fromCharCode(ucode);
document.getElementById("chr1").innerHTML = myChr;
document.getElementById("chr").innerHTML = ucode;
}
</script>

</body>
</html>

The character of unicode is


**Please refresh this page if you want to enter a new unicode.

Example 11.2: The charCodeAt(0) Method

This method returns the Unicode of the first character in a string. The index 0 indicates teh first position of the string. This example returns the unicode for the character input by the user. As the user only input one character, the index 0 indicates the character being entered.

<!DOCTYPE html>
<html>
<body onload="myFunction()">

<h3>The unicode of the character <b id="chr"></b> is <b id="chr1"></b></h3>

<script>
function myFunction2() {
 var mychr = prompt("Please enter a character and click OK to view the corresponding unicode");
 document.getElementById("chr").innerHTML = mychr;
 document.getElementById("chr1").innerHTML = mychr.charCodeAt(0);
}
</script>

</body>
</html>

The unicode of the character is






<Previous Lesson> [Table of Contents] <Next Lesson>

Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInEmail this to someone