`
sbpya
  • 浏览: 615666 次
  • 性别: Icon_minigender_1
  • 来自: 杭州,长沙
社区版块
存档分类
最新评论

javascript实例教程(18) 使用字符串函数

阅读更多

javascript实例教程(18) 使用字符串函数

<!---->

字符串对象提供了许多方法,但是很少的程序设计人员充分利用它们,这对于一个程序员来说,不能不说这是一种缺陷。字符串提供的方法可以用于操作字符、产生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")  

分享到:
评论

相关推荐

    JavaScript实例教程

    这本《JavaScript实例教程》致力于通过丰富的实例代码,帮助读者深入理解和掌握JavaScript编程技术。 首先,JavaScript的核心概念是变量、数据类型、操作符和控制结构。变量在JavaScript中用于存储数据,可以动态地...

    javascript精彩实例教程

    ES6(ECMAScript 2015)引入了类、解构赋值、模板字符串、箭头函数、Set和Map等新特性,增强了JavaScript的功能。 通过这个实例教程,你将有机会亲手实践以上知识点,加深理解,并掌握JavaScript的实际运用。不断...

    JavaScript实例教程源代码.rar

    以下是对21章JavaScript实例教程源代码的详细解读: 1. **变量与数据类型**:在JavaScript中,变量用于存储数据,可以使用var、let或const关键字声明。了解基本数据类型(如字符串、数字、布尔值、null、undefined...

    javascript实例教程

    通过这个JavaScript实例教程,你将一步步深入JavaScript的世界,从基础知识到高级应用,每一步都有实际案例作引导,确保你在实践中掌握知识。不断练习和探索,你将成为一名出色的JavaScript开发者,胜任动态网页的...

    JavaScript基础与实例教程

    本教程“JavaScript基础与实例教程”由中国电力出版社出版,旨在为初学者和有经验的开发者提供一个深入理解JavaScript核心概念和实践技巧的平台。 首先,JavaScript的核心概念包括变量、数据类型和操作符。变量是...

    菜鸟学习javascript实例教程

    总结,这个JavaScript实例教程涵盖了基本的文本输出、HTML标签的使用、脚本位置、变量的声明和使用、以及函数的定义和调用,包括传参,这些都是JavaScript初学者需要掌握的基础知识。通过这些实例,菜鸟可以逐步理解...

    编程语言JavaScript免费视频实例教程

    1. **JavaScript基础**:从最基础的语法开始,包括变量声明、数据类型(如字符串、数字、布尔值、数组、对象等)、流程控制(条件语句、循环)以及函数的使用。这些是编写任何JavaScript代码的基础。 2. **DOM操作*...

    JavaScript开发实例教程

    "JavaScript开发实例教程"是一本专为初学者设计的书籍,旨在通过实例帮助读者深入理解和掌握JavaScript的核心概念。 JavaScript的基础知识包括变量、数据类型、运算符和控制流程。变量是存储数据的容器,可以用来...

    javascript实例教程(html版)

    JavaScript是一种广泛应用于网页和网络应用的编程语言,它在HTML页面中起...这个JavaScript实例教程将带你逐步走进这个强大且灵活的语言世界,通过实际操作,你将更好地理解和运用这些概念,从而提升你的网页编程能力。

    javascript实例教程 java

    JavaScript实例教程通常会涵盖以下关键知识点: 1. **基础语法**:JavaScript的基础包括变量、数据类型(如字符串、数字、布尔值、null、undefined、对象和数组)、操作符(如算术、比较、逻辑、赋值等)、流程控制...

    JavaScript实例教程(经典的JS入门教程) pdf扫描版(带书签)

    《JavaScript实例教程》是一本经典的入门教程,旨在帮助初学者快速掌握JavaScript的核心概念,并为有一定基础的开发者提供深入理解的资源。书中通过丰富的实例,使学习者能够直观地了解和实践JavaScript的各种功能。...

    JavaScript经典实例教程代码

    1. **基础语法**:JavaScript的基础包括变量声明、数据类型(如字符串、数字、布尔、null、undefined)、操作符(算术、比较、逻辑)、流程控制(条件语句if/else、循环for/while)以及函数定义与调用。这些基础知识...

    JavaScript 网页开发实例教程

    本实例教程将深入探讨如何使用JavaScript进行高效的网页开发,帮助初学者和进阶者提升技能,实现动态和交互性的网页效果。 一、JavaScript基础 1. 变量与数据类型:JavaScript支持多种数据类型,包括基本类型(如...

    Javascript实例教程 经典的

    本“JavaScript实例教程”旨在通过大量的实例,帮助初学者和有一定基础的学习者深入理解并熟练掌握JavaScript的核心概念和应用技巧。教程覆盖了从基础语法到高级特性的全方位教学,通过实践的方式提升学习效果。 1....

    《JavaScript动态网页设计经典实例教程》

    这通常涉及到JavaScript的定时器(setTimeout和setInterval)以及字符串操作,通过这些技术可以创建出各种吸引用户的文字效果。 六、图片处理 图片特效包括图片轮播、缩放、淡入淡出等。JavaScript可以控制图片的...

    JavaScript实例教程(9-16)

    这个"JavaScript实例教程(9-16)"涵盖了从第9个到第16个JavaScript实际应用案例,旨在帮助学习者深入理解和掌握JavaScript的核心概念及实际操作技巧。 1. **变量与数据类型** - JavaScript中的变量是存储数据的容器...

Global site tag (gtag.js) - Google Analytics