VirtualMV/JavaScript/Strings

From WikiEducator
Jump to: navigation, search




Overview

VmvIcon Objectives.png

By the end of this page you will be able to:

  • Understand how to use string functions in JavaScript

String Literals

  • A string literal is zero or more characters enclosed in double (") or single (') quotation marks.
  • A string must be delimited by quotation marks of the same type; that is, either both single quotation marks or both double quotation marks.
  • The following are examples of string literals:
    • "qwerty"
    • 'qwerty'
    • "1234"
    • "first line \n second line"
  • You can call any of the methods of the String object on a string literal value—JavaScript automatically converts the string literal to a temporary String object, calls the method, then discards the temporary String object.

Special characters

  • The following table lists the special characters that you can use in JavaScript strings.
CharacterMeaning
\bBackspace
\fForm feed
\nNew line
\rCarriage return
\tTab
\vVertical tab
\'Apostrophe or single quote
\"Double quote
\\Backslash character (\)

Length (js4_01)

PropertiesComment
LengthReturns the number of characters in a string
<html>
<head><title>JavaScript (js4_01)</title></head>
<body>
<script type="text/javascript">
  var strX="JavaScript is great! "
  document.write("<p>" + strX + "</p>Length: ")
  document.write(strX.length)
</script>
</body>
</html>

Example :Click here to run js4_01.

String methods

MethodMeaning (Returns..)
anchor()a string as an anchor
big()a string in big text
blink()a string blinking
bold()a string in bold
charAt()the character at a specified position
concat()two concatenated strings
fontcolor()a string in a specified color
fontsize()a string in a specified size
indexOf()the position of the first occurrence of a specified string inside another string (–1 if it never occurs)
italics()a string in italic
lastIndexOf()Returns the position of the first occurrence of a specified string inside another string (-1 if it never occurs).
link()Returns a string as a hyperlink
match()the specified string, or "null", instead of a numeric value (Similar to indexOf and lastIndexOf)
replace()Replaces some specified characters with some new specified characters
search()an integer if the string contains some specified characters, if not it returns -1
substr()Returns the specified characters. 14,7 returns 7 characters, from the 14th character (starts at 0)
substring()the specified characters. 7,14 returns all characters from the 7th up to but not including the 14th (starts at 0)
sup()a string as superscript
toLowerCase()the string in lower case
toUpperCase()the string in upper case

indexOf .. example (js4_02)

IndexOf() : Returns the position of the first occurrence of a specified string
            inside another string. Returns1 if it never occurs
<html>
<head><title>JavaScript (js4_02)</title></head>
<body>
<script type="text/javascript">
  var strFind = "is";
  var strX="Javascript is great!";
  var intPos=strX.indexOf(strFind)
  if (intPos>=0){
    document.write("In <b>'" + strX + "'</b> <br /> '" + strFind + "' was found at position: ")
    document.write(intPos + "<br />")
  }
  else {
    document.write(strFind + " not found!")
  }
</script>
</body>
</html>

Example :Click here to run js4_02.

match .. example (js4_03)

match() : Similar to indexOf and lastIndexOf, but this method 
returns the specified string, or "null", instead of a numeric value


<html>
<head><title>JavaScript (js4_03)</title></head>
<body>
<script type="text/javascript">
  var strX = "Javascript is great!";
  var strMatch1 = "great";
  var strMatch2 = "not";
 
  document.write("<p>String  = " + strX + "<br />")
  document.write("Match1 ("+ strMatch1 + ") = " + strX.match(strMatch1) + "<br />")
  document.write("Match2 ("+ strMatch2 + ") = " + strX.match(strMatch2)+"</p>")
</script>
<p>This example tests if a string contains a specified word.
   If the word is found it returns the word.</p>
</body>
</html>

Example :Click here to run js4_03.

substr/substring .. example (js4_04)

substring() : Returns the specified characters. 7,14
returns all characters from the 7th up to but not including the 14th (starts at 0)


<html>
<head><title>JavaScript (js4_04)</title></head>
<body>
<script type="text/javascript">
  var strX= " Javascript is great! ";
  document.write("<p>" + strX + "</p>");
  document.write("<p>substr(5,6) = "+ strX.substr(5,6) + "</p>");
  document.write("<p>substring(5,6) = " + strX.substring(5,6) + "</p>");
</script>
<p>The substr() method returns a specified part of a string.
 If you specify (5,6) the returned string will be from the fifth
 character (start at 0) and 6 long.</p>
<p>The substring() method also returns a specified part of a string.
 If you specify (5,6) it returns all characters from the fifth character
 (start at 0) and up to, but not including, the sixth character.</p>
</body>
</html>

Example :Click here to run js4_04.

toUpperCase/toLowerCase .. example (js4_05)

<html>
<head><title>JavaScript (js4_05)</title></head>
<body>
<script type="text/javascript">
  var strX=("Hello JavaScripters!")
  document.write(strX.toLowerCase())
  document.write("<br>")
  document.write(strX.toUpperCase())
</script>
</body>
</html>

Example :Click here to run js4_05.

LeftStr .. example (js4_06)

Some languages provide Left, Right and Mid string functions. JavaScript requires you to write your own (there is a sneaky way to do this using the split method and arrays but we'll leave that until arrays are covered). B. Devington Rayan (2002) [1] describes the JavaScript Left and Right string. A modified version is as follows:

<html>
<head>
<title>Left String example</title>
<script type="text/javascript">
<!-- 
function fnLeftStr(strX, n){	if (n <= 0) return "";	else if (n > String(strX).length) return strX;	     else return String(strX).substring(0,n);}//-->
</script>
</head>
<body>
  <div style="color: #0000FF">
    <script type="text/javascript">
	var strTest = "Hello World";
	document.write('The first 5 characters of '+strTest);
	strResult = fnLeftStr(strTest,5);
	document.write(' are "'+strResult+'"');
    </script>
  </div>
</body>
</html>

Example :Click here to run js4_06.

Exercise: Using String methods to reverse text (js4_07)

Create a JavaScript that takes "Firstname Lastname" input and reverses it to "Lastname, Firstname".

  • For example "Neil Coomber" is converted to "Coomber, Neil"

Example :Click here to run js4_07_ReverseName.


VmvIcon References.png References

  1. Rayan, B.D. (2002) Adding Left and Right Functionality in JavaScript. Retrieved November 1, 2009 from http://www.devx.com/tips/Tip/15222

virtualMV  |  Superquick wiki guide  |  Please give me some feedback

VirtualMV/JavaScript/Strings. (2017). In WikiEducator/VirtualMV wiki. Retrieved October 18, 2017, from http://wikieducator.org/VirtualMV/JavaScript/Strings    (zotero)