`
igogogo9
  • 浏览: 247224 次
  • 性别: Icon_minigender_1
  • 来自: 海口市
社区版块
存档分类
最新评论

Javascript实例教程 使用字符串函数

阅读更多

charAt 方法

返回指定索引位置处的字符。

strObj.charAt(index)

参数

strObj

必选项。任意 String 对象或文字。

index

必选项。想得到的字符的基于零的索引。有效值是 0 与字符串长度减 1 之间的值。

说明

charAt 方法返回一个字符值,该字符位于指定索引位置。字符串中的第一个字符的索引为 0,第二个的索引为 1,等等。超出有效范围的索引值返回空字符串。

示例

下面的示例说明了 charAt 方法的用法:

function charAtTest(n){
   var str = "ABCDEFGHIJKLMNOPQRSTUVWXYZ"; //
初始化变量。
   var s; // 声名变量。
   s = str.charAt(n - 1); // 从索引为n – 1的位置处
// 获取正确的字符。
   return(s); //返回字符。
}




字符串对象提供了许多方法,但是很少的程序设计人员充分利用它们,这对于一个程序员来说,不能不说这是一种缺陷。字符串提供的方法可以用于操作字符、产生HTML标签以及搜索字符串等等。

下 面首先说说什么是字符串。在JavaScript语言中,字符串就是一种对象。就象在Java中,它们不是作为一系列的字符被存储的,所以字符串的操作必 须使用内置的构造器和设置函数来完成。在后来的版本中有了字符串构造器和更多的关于对象的概念。在这个层次上说,字符串是由字母而不是数字组成的变量,这 就是字符串的概念。

举个例子,一些有效的字符串为"Hello", "Bob", "Bob2", "33", "33.3",而33或者33.3就不是字符串了。所有的字符串有一个共同的属性,称为长度,这个长度返回了字符串中字符的个数。

最常用的字符串方法是:indexOf()、charAt()和substring()。因为这几个方法在JavaScript中经常出现,所以下面我对它们进行详细说明:

indexOf()函数

这个函数允许你判断一个字符串是否存在于一个更长的字符串中以及它所处的位置。它等价于C语言中的strstr函数以及Visual Basic语言中的inStr函数。这个方法也有一个相应的函数:lastIndexOf(),这个函数字符串的另外一端搜索。

就象函数的名字所意味的,返回数值表明字符串在所搜索字符串中的位置。如果在被搜索的字符串中没有找到要查找的字符串就返回-1。这里要注意,在JavaScript中-1是一个普通的整数,而不是一个布尔型(Boolen)的数。以下是具体例子:

var myString = "Have a nice day!";

alert(myString.indexOf("a")); //这里返回1

alert(myString.lastIndexOf("a")); // 这里返回 13

这里还需要再提醒一次,在JavaScript中的数组的索引是从0开始,这跟C语言是遗言的。所以上面的语句alert(myString.indexOf("a"))是返回1,因为”a” 处于字符串"Have a nice day!"的第二个位置。

细心一点,你可能会发现字符串"Have a nice day!"还有一个字符"a",那怎么才能找到第二个字母"a"呢?这是一个很好的问题,为了做到这一点,我们必须再介绍这个函数的第二个参数。第二个参数是一个整数,它指示了字符串中开始搜索的位置。

为了综合以上的知识,下面对代码进行一些来找到所有字符"a",具体代码如下:

var myString = "Have a nice day!";

var index = myString.indexOf("a");

while (index != -1) {

alert(index);

index = myString.indexOf("a", index + 1);
// start search after last match found

}

下 面详细解释一下这段代码:变量index被初始化为第一个"a"所在的位置(如果没有"a",那么变量index就为-1)。然后再给出一个循环,条件是 index!=-1。在每次的循环中,我们将变量index加1,即从找到的"a"后面第一个字符开始继续查找,直至将所有的字符"a"找到为止。当再也 没有字符"a"在字符串变量mySring中找到的时候,就返回-1值,此时index就等于-1,不满足循环条件index!=-1,故导致循环结束。 而alert(index)语句的输出为:1,5,13。

在这个例子中我们只是展示indexOf()进行单一字符的搜索。如果你经常使用这个函数,你会发现它可以搜索任意的字符或者字符串。

charAt()函数

这 个函数返回在字符串中字符处在给定的位置。从本质上讲,它是substring()方法的一个特例,但是它也有自己的用途。如果你原来是个C语言程序员或 者其它相近的语言的程序员,那么你就能理解当引用字符的时候,可以利用string.charAt(index)来代替string[index]。

下面我们来在一个表单输入中使用这个函数。表单中有email地址,当然这个email地址要限制为字符、数字以及一个"@"符号。我们可以一次性讲字符串分列为单个字符来对它进行强制。详细代码如下:

<SCRIPT language="JavaScript"> <!-- Hide from older browsers

var parsed = true;

var validchars = "abcdefghijklmnopqrstuvwxyz0123456789@.-";

var email = prompt("What is your email address?", "nobody@nowhere.com");

for (var i=0; i < email.length; i++) {

var letter = email.charAt(i).toLowerCase();

if (validchars.indexOf(letter) != -1)

continue;

alert("Invalid character: " + letter);

parsed = false;

break;

}

if (parsed) alert("Your email address contains all valid characters.");

// Stop hiding -->

</SCRIPT>



(图1)

如图1所示。你可以按下”check Email”按钮,此时就会弹出一个对话框,如图2所示。



(图2)

你 可以在上面随便填入一个email地址,然后点击”确定”键。接着还会弹出一个检查Email地址的结果。加入你输入email地址: purple@pconline.com.cn之后,你就会看到如图3所示的结果。如果你输入:ok#pconline.com.cn就会出现如图4所示 的结果,因为#是一个无效的字符。



(图3)



(图4)

以下将详细解释上面这段代码:

以上的例子使用了一些字符串的函数、循环语句以及Boolean(布尔)运算。所有的这些在前面的教程中都有提及,当然除了toLowerCase()函数,这个函数下面再介绍。

以上的代码实际上很简单,只不过是想测试一下email地址中的每一个字符是不是一个有效的字符而已 。但是实现过程看起来有点笨拙,不象C语言或者Perl语言那样简单。从本质上讲,我们是使用charAt()来循环浏览email地址的字符串以提取出无效的字符。

如果字符是有效的,那就继续循环;如果字符是无效的,就会弹出一个警告窗口说明那个字符是无效的,此时在设置parsed=false之后使用break语句来结束for循环。

当循环存在,我们可以检查标志parsed看是否email是有效的。如果parsed为true,那么消息将被显示。

点击
此处去测试页面
substring()函数

这个函数通常使用于提取字符串的任何部分。它的参数是'start' 和'end'。开始的数值是第一个字符的索引,结束数值是返回部分之后的第一个字符的索引。你可能听起来会觉得云里雾里的,但是一个最好的记忆方法是:返回字符串的长度等于end-start。

如果第二个参数省略了,那么它默认为直到字符串的结束。下面是几个例子:

var str = "This is a string";

str.substring(1, 3); //结果为hi

str.substring(3, 1); //结果为hi

str.substring(0, 4); //结果为This

str.substring(8); //结果为hi

str.substring(8, 8); //结果为空

上面的第二个例子是说明了当start>end的时候,那么这两个参数自动转换.最后的例子显示了:当start等于end的时候,返回数值为空字符串。

字符格式(HTML)

下面介绍JavaScript中最少使用的函数。虽然它们并不是十分有用,但至少它们为你的代码增加一些装饰。这些方法从字符对象中创建HTML代码用于显示在网页上。

str.anchor("anchor1")

<A NAME="anchor1">This is a string</A>

This is a string

str.big()

<BIG>This is a string</BIG>

This is a string

str.blink()

<BLINK>This is a string</BLINK >

This is a string

str.bold()

<B>This is a string</B>

This is a string

str.fixed()

<TT>This is a string</TT>

This is a string

str.fontcolor("darkred")

<FONT COLOR="darkred">This is a string</FONT>

This is a string

str.fontsize(5)

<FONT SIZE="5">This is a string</FONT>

This is a string

str.italics()

<I>This is a string</I>

This is a string

str.link("index.html")

<A HREF="index.html">This is a string</A>

This is a string

str.small()

<SMALL>This is a string</SMALL>

This is a string

str.strike()

<STRIKE>This is a string</STRIKE>

This is a string

str.sub()

<SUB>This is a string</SUB>

This is a string

str.sup()

<SUP>This is a string</SUP>

This is a string

str.toLowerCase()

this is a string

this is a string

str.toUpperCase()

THIS IS A STRING

THIS IS A STRING



上表中最后的两个例子不是与HTML特定相关的,但是它们作为一种格式工具是很有用的。所有的这些方法可以应用到字符串中来创建一个定制的格式。
下面再给出一个例子: <BODY>

<SCRIPT language="JavaScript">

<!-- Hide from older browsers

var heading = prompt("Please enter a heading", "Test Heading");

var colour = prompt("Please enter a colour", "darkred");

document.write(heading.fontsize(7).fontcolor
(colour).bold().toUpperCase());

// Stop hiding -->

</SCRIPT>

</BODY>



(图5)

这时你按下如图5所示的按钮,就可以弹出如图6的对话框:



(图6)

在其中的方框中输入网页的标题:太平洋电脑网,点击确定键。接着再弹出一个对话框要求输入颜色,如图7所示:



(图7)

点击确定键后就产生了如图8所示的网页:



(图8)

点击此处去测试页面

就象我们前面所解释的,写东西到一个已经装载的文档或者窗口是不可能的。为了显示这个代码我们打开新窗口并为这个窗口写入产生的HTML代码。

当然,你可以只使用JavaScript来格式化文本,但是一旦被格式化后的文本出现在网页上,它就不可变了。

escape() and unescape()

当你从一个网页向另一个网页传递数值的时候,你可以使用URL搜索字符串(比如使用一个表单,利用method="get"),这时你会发现有些字符被转换为 %nn格式:

http://www.mydomain.com.au/index.html?name=Duncan%20Crombie

而网络服务器和网络浏览器只能处理有限的字符,所以任何的字符一旦超过这个范围都将以数字的形式进行传递。

这个escape函数可以对变量进行编码,当设置cookies的时候它经常使用;而unescape函数是用来对它们进行译码。
分享到:
评论

相关推荐

    W3C JavaScript 高级教程.rar

    JS 字符串 JS 日期 JS 数组 JS 逻辑 JS 算数 JS RegExp JS HTML DOM JavaScript 高级 JS 浏览器 JS Cookies JS 验证 JS 动画 JS 图像地图 JS 计时 JS 创建对象 JS 总结 实例/...

    实例教程1小时学会Python

    实例教程:1小时学会Python 1 序言 面向读者 本文适合有经验的程序员尽快进入Python2.x世界.特别地,如果你掌握Java和Javascript,不用1小时你就可以用Python快速流畅地写有用的Python程序. Python3.x用户请参考:...

    JavaScript十大取整方法实例教程

    // 注意toFixed返回的字符串,若想获得整数还需要做类型转换 1.5555.toFixed(0) // =&gt; 1 3. Math.ceil() // 向上取整 Math.ceil(1.5555) // =&gt; 2 4. Math.floor() // 向下取整 Math.floor(1.5555) // =&gt; 1 5. ...

    JavaScript高级教程

    2.7.1 转换成字符串..............................................18 2.7.2 转换成数字..............................................19 2.7.3 强制类型转换..............................................20 ...

    PHP 使用技巧集.rar

    如何使用PHP中的正则表达式 如何使用PHP中的字符串函数 如何用PHP3实现文件上载(实例2) 如何用PHP实现网页动态跳转 如何用 PHP 实现文件上传(实例1) 如何用 PHP 文件操作函数 如何用 PHP 在 mySQL 中创建...

    PHP和MySQL Web开发第4版pdf以及源码

    4.5 使用字符串函数匹配和替换子字符串 4.5.1 在字符串中查找字符串:strstr()、strchr()、strrchr()和stristr() 4.5.2 查找子字符串的位置:strpos()、strrpos() 4.5.3 替换子字符串:str_replace()、substr_...

    PHP和MySQL Web开发第4版

    4.5 使用字符串函数匹配和替换子字符串 4.5.1 在字符串中查找字符串:strstr()、strchr()、strrchr()和stristr() 4.5.2 查找子字符串的位置:strpos()、strrpos() 4.5.3 替换子字符串:str_replace()、substr_...

    PHP和MySQL WEB开发(第4版)

    4.5 使用字符串函数匹配和替换子字符串 4.5.1 在字符串中查找字符串:strstr()、strchr()、strrchr()和stristr() 4.5.2 查找子字符串的位置:strpos()、strrpos() 4.5.3 替换子字符串:str_replace()、substr_...

    在Python中使用HTML模版的教程

    在函数中返回一个包含HTML的字符串,简单的页面还可以,但是,想想新浪首页的6000多行的HTML,你确信能在Python的字符串中正确地写出来么?反正我是做不到。 俗话说得好,不懂前端的Python工程师不是好的产品经理。...

    Web Services 教程

    JSON 实例 - 来自字符串的对象 46 JSON 解析器 47 XQuery 教程 48 XQuery 参考手册 48 内容目录 48 XQuery 简介 49 您应该具备的基础知识: 49 什么是 XQuery? 49 XQuery 和 XML 查询有关 50 XQuery 与 XPath 50 ...

    Javascript DHTML 实例编程(教程)(四)初级实例篇2—动画

    语法皆是window.setTimeout(fn, delay), window.setInterval(fn, delay) fn可以是一个函数名,也可以是一个执行的字符串,但要注意的是,如果fn是一个可以执行的字符串,且有参数,如window.setInterval(...

    jQuery详细教程

    某些其他 JavaScript 库中的函数(比如 Prototype)同样使用 $ 符号。 jQuery 使用名为 noConflict() 的方法来解决该问题。 var jq=jQuery.noConflict(),帮助您使用自己的名称(比如 jq)来代替 $ 符号。 亲自试一...

    正则表达式经典实例

    本书对于如何使用正则表达式来解决一些常见的问题给出了按部就班的解决方案,其中包括c#、Java、JavaScript、Perl、PHP、Python、Ruby和VB.NET的实例。  本书主要包括以下内容:  通过一个精练的教程理解正则...

    Kotlin语言教程.docx

    fun main(args: Array) { // 包级可见的函数,接受一个字符串数组作为参数 println("Hello World!") // 分号可以省略 } 运行实例 » 面向对象 class Greeter(val name: String) { fun greet() { println("Hello

    正则表达式经典实例.pdf

    本书对于如何使用正则表达式来解决一些常见的问题给出了按部就班的解决方案,其中包括c#、Java、JavaScript、Perl、PHP、Python、Ruby和VB.NET的实例。  本书主要包括以下内容:  通过一个精练的教程理解正则...

    史上最全韩顺平传智播客PHP就业班视频,10月份全集

    10-19 4 smarty 字符串 自定义插件 缓存 10-19 5 smarty 字符串 自定义插件 缓存 10-19 6 smarty实例应?? 10-19 7 smarty实例应用2 10-19 8 smarty实例应用3 10-20 1 smarty应用 更换网站皮肤 10-20 2 smarty应用 ...

    javascript面向对象程序设计高级特性经典教程(值得收藏)

    本文实例讲述了javascript面向对象程序设计的高级特性。分享给大家供大家参考,具体如下: 1.创建对象的三种方式: 第一种构造法:new Object var a = new Object(); a.x = 1, a.y = 2; 第二种构造法:对象直接量...

    史上最全韩顺平传智播客PHP就业班视频,9月份全集

    10-19 4 smarty 字符串 自定义插件 缓存 10-19 5 smarty 字符串 自定义插件 缓存 10-19 6 smarty实例应?? 10-19 7 smarty实例应用2 10-19 8 smarty实例应用3 10-20 1 smarty应用 更换网站皮肤 10-20 2 smarty应用 ...

    史上最全传智播客PHP就业班视频课,8月份视频

    10-19 4 smarty 字符串 自定义插件 缓存 10-19 5 smarty 字符串 自定义插件 缓存 10-19 6 smarty实例应?? 10-19 7 smarty实例应用2 10-19 8 smarty实例应用3 10-20 1 smarty应用 更换网站皮肤 10-20 2 smarty应用 ...

    网页与Web程序设计 课件 ppt 机械工业出版社 part1

    7.3.2 字符串型 124 7.3.3 布尔型 125 7.3.4 变量 125 7.4 JavaScript的表达式和运算符 126 7.4.1 表达式 126 7.4.2 运算符 126 7.5 JavaScript基本语句 127 7.5.1 引例 127 7.5.2 表达式语句和复合语句 ...

Global site tag (gtag.js) - Google Analytics