一、概述

　　今天我们就来说说Javascript的字符串操作，以及跑马灯的示例，这个场景我们经常用到，所以好好研究一下。

二、定义变量

1、定义局部变量

说明：99%的情况下，都是定义的局部变量。定义局部变量：var 变量名="值"

>>var name = "zhangqigao"   //定义局部变量

2、定义全局变量

说明：这个情况下，一般不能乱定义，只有确定下来之后才能定义。定义全局变量：变量名="值"

>>name = "zhangqigao"  //定义全局变量

JavaScript中变量的声明是一个非常容易出错的点，局部变量必须一个 var 开头，如果未使用var，则默认表示声明的是全局变量。

// 全局变量
name = 'seven';function func(){// 局部变量var age = 18;// 全局变量gender = "男"}

三、数字和字符串数据类型

3.1、数字类型

说明：JavaScript中不区分整数值和浮点数值，JavaScript中所有数字均用浮点数值表示。

<script>var age=18  //定义数字类型的变量
</script>

转换：

parseInt(..) 将某值转换成数字，不成功则NaN
parseFloat(..) 将某值转换成浮点数，不成功则NaN

>>age='18'
"18"
>>parseInt(age)
18
>>parseFloat(age)
18

特殊值：

NaN，非数字。可使用 isNaN(num) 来判断。
Infinity，无穷大。可使用 isFinite(num) 来判断。

>>isNaN('18')
false
>>isNaN("dbjdw")
true

更多数值计算：

 1 常量
 2
 3 Math.E
 4 常量e，自然对数的底数。
 5
 6 Math.LN10
 7 10的自然对数。
 8
 9 Math.LN2
10 2的自然对数。
11
12 Math.LOG10E
13 以10为底的e的对数。
14
15 Math.LOG2E
16 以2为底的e的对数。
17
18 Math.PI
19 常量figs/U03C0.gif。
20
21 Math.SQRT1_2
22 2的平方根除以1。
23
24 Math.SQRT2
25 2的平方根。
26
27 静态函数
28
29 Math.abs( )
30 计算绝对值。
31
32 Math.acos( )
33 计算反余弦值。
34
35 Math.asin( )
36 计算反正弦值。
37
38 Math.atan( )
39 计算反正切值。
40
41 Math.atan2( )
42 计算从X轴到一个点的角度。
43
44 Math.ceil( )
45 对一个数上舍入。
46
47 Math.cos( )
48 计算余弦值。
49
50 Math.exp( )
51 计算e的指数。
52
53 Math.floor( )
54 对一个数下舍人。
55
56 Math.log( )
57 计算自然对数。
58
59 Math.max( )
60 返回两个数中较大的一个。
61
62 Math.min( )
63 返回两个数中较小的一个。
64
65 Math.pow( )
66 计算xy。
67
68 Math.random( )
69 计算一个随机数。
70
71 Math.round( )
72 舍入为最接近的整数。
73
74 Math.sin( )
75 计算正弦值。
76
77 Math.sqrt( )
78 计算平方根。
79
80 Math.tan( )
81 计算正切值。

Math

3.2、字符串

说明：字符串是由字符组成的数组，但在JavaScript中字符串是不可变的：可以访问字符串任意位置的文本，但是JavaScript并未提供修改已知字符串内容的方法。

常见功能：

obj.charAt(n)                     　 返回字符串中的第n个字符
obj.length                           长度
obj.substring(from, to)       　　　　根据索引获取子序列
obj.trim()                           移除两边空白
obj.trimLeft()                       移除左边空白
obj.trimRight()                      移除右边空白
obj.concat(value, ...)               拼接
obj.indexOf(substring,start)         子序列位置
obj.lastIndexOf(substring,start)     子序列位置
obj.slice(start, end)                切片
obj.toLowerCase()                    小写
obj.toUpperCase()                    大写
obj.split(delimiter, limit)          分割
obj.search(regexp)                   从头开始匹配，返回匹配成功的第一个位置(g无效)
obj.match(regexp)                    全局搜索，如果正则中有g表示找到全部，否则只找到第一个。
obj.replace(regexp, replacement)     替换，正则中有g则替换所有，否则只替换第一个匹配项，$数字：匹配的第n个组内容；$&：当前匹配的内容；$`：位于匹配子串左侧的文本；$'：位于匹配子串右侧的文本$$：直接量$符号

1、charAt(n)

说明：返回字符串中的第n个字符

>>name ="zhangqigao"
"zhangqigao"
>>name.charAt(0)  //返回第1个字符
"z"

2、substring(from, to)

说明：根据索引获取子序列，顾头不顾尾

>>name ="zhangqigao"
"zhangqigao"
>>name.substring(1,5) //返回从2位到第4位的字符串，顾头不顾尾
"hang"

3、lenght

说明：获取当前字符串的长度

>>name ="zhangqigao"
"zhangqigao"
>>name.length #返回name字符串的长度
10

4、trim()

说明：移除字符串两边的空白

>>name = "  zhangqigao  "
"  zhangqigao  "
>>name.trim()
"zhangqigao"

5、trimLeft()

说明：移除字符串左边的空白

>>name = "  zhangqigao  "
"  zhangqigao  "
>>name.trimLeft()
"zhangqigao  "

6、trimRight()

说明：移除字符串右边的空白

>>name = "  zhangqigao  "
"  zhangqigao  "
>>name.trimRight()
"  zhangqigao"

7、concat(value, ...)

说明：拼接字符串

>>first_name = "zhang"
"zhang"
>>middle_name = "qi"
"qi"
>>last_name = "gao"
"gao"
>>full_name = first_name.concat(middle_name,last_name)
"zhangqigao"

8、indexOf(substring,start)

说明：从头往后计算子序列的位置

>>name = "zhangqigao"
"zhangqigao"
>>name.indexOf("qi")
5

9、slice(start, end)

说明：切片，遵循顾头不顾尾原则

>>name = "zhangqigao"
"zhangqigao"
>>name.slice(1,3) //顾头不顾尾
"ha"

10、toLowerCase()

说明：小写

>>a = "ZHANGQIGAO"
"ZHANGQIGAO"
>>a.toLowerCase()
"zhangqigao"

11、 toUpperCase()

说明：大写

>>name = "zhangqigao"
"zhangqigao"
>>name.toUpperCase()
"ZHANGQIGAO"

12、split(delimiter, limit)

说明：分割，delimiter：分割符，limit：拿前几个值

>>name = "zhang,qi,gao"
"zhang,qi,gao"
>>name.split(",")   #按逗号分割
["zhang", "qi", "gao"]
>>name.split(",",1)
["zhang"]
>>name.split(",",2)  //分割之后拿前2个值
["zhang", "qi"]
>>name.split(",",3)
["zhang", "qi", "gao"]

四、定时器

4.1、定时器

说明：我们每隔多长时间执行一下某个程序，我们成为定时任务，setInterval("定时任务名"，间隔时间)，时间是以ms为单位的。

<script>function f1(){   //定义一个函数f1console.log(1);   //会在浏览器console控制台输出日志}setInterval("f1()",1000);   //每隔1秒执行一下f1()函数
</script>

如图：

五、跑马灯示例

　　我们用上面的知识，来写一个跑马灯示例，这个我们经常会用到，特别我们在某个网站上看到欢迎***来莅临指导，然后这个字返回出现，那这个是怎么做的呐？我们就来写一个。

5.1、代码调试

js的代码为：

<body><div id="i1">欢迎帅高高莅临指导</div><script>function  f1(){//根据ID指定的标签的内容，定义局部变量var tag = document.getElementById("i1");//获取标签内部的内容var content = tag.innerText;//获取第一个字符var f = content.charAt(0);//获取除第2个到在最后1个的字符串var l = content.substring(1,content.length);// 重新拼接，获取新的字符串var new_content = l + f;//替换标签内之前内容tag.innerText = new_content;}setInterval("f1()",1000) //每秒执行一次定时任务</script>
</body>

如果你想把函数重新写到js文件中，那就可以这样做：

就是你先用<script>引入外联script文件，不会执行中间的内容，只引入js文件->再用另外一个<script>去编写当前页面的js

转载于:https://www.cnblogs.com/zhangqigao/articles/8109793.html

day15-JavaScript字符串操作以及跑马灯示例相关推荐

js 包含某个字符串_[译] 5 大 JavaScript 字符串操作库
原文地址:5 String Manipulation Libraries for JavaScript 原文作者:Mahdhi Rezvi 译文出自:掘金翻译计划本文永久链接:https://git ...
javascript 字符串操作函数大全
javascript字符串操作函数小结,收藏起来,总有你会用上! concat() – 将两个或多个字符的文本组合起来,返回一个新的字符串. indexOf() – 返回字符串中一个子串第一处出现的索 ...
JavaScript字符串操作
字符串查询 1.indexOf indexOf('字符',参数二): 参数一:要查询的字符: 参数二:查询的起始位置索引下标: 返回值:第一次出现该字符的索引下标,如果不存在返回值-1: var st ...
JavaScript字符串操作，把短线（-）命名格式改变为驼峰命名
function humpName (params) {//分割字符串为数组var arr = params.split(''); //判断数组第一个元素是否为 - 是的话删除if (arr.inde ...
字符串includes_字符串操作大全：面试准备和日常编码所需一文打尽
全文共14056字,预计学习时长36分钟图源:unsplash 字符串是一系列字符,由常数或变量构成.它是编程语言中必不可少的数据类型.本文中将重点关注JavaScript字符串操作,但其原理和算法 ...
c语言字符串中的字符无效,字符串操作
字符串主要用于编程,字符串在存储上类似字符数组,所以它每一位的单个元素都是可以提取的.字符串也有很多操作,在正文将对C语言.C++和java中对其操作进行介绍. 中文名字符串操作外文名 strin ...
跑马灯抽奖js php,文字跑马灯效果的完成
文字跑马灯效果的完成发表于2019-06-09 21:14| 次阅读| 来源网络整理| 作者session 摘要:跑马灯效果在很多页面上也常常出现,本文次要为大家具体引见微信小程序完成文字跑马灯效果 ...
Arduino IDE搭建合宙ESP32C3开发环境（最简单）附跑马灯代码
Arduino IDE搭建合宙ESP32C3开发环境(最简单) 附跑马灯代码一.安装Arduino IDE 二.搭建合宙简约版ESP32C3开发环境 1.产品示例&管脚定义&原理图 ...
js反序列化html编码,JavaScript实现的反序列化json字符串操作示例
本文实例讲述了JavaScript实现的反序列化json字符串操作.分享给大家供大家参考,具体如下: JavaScript中如何反序列化json字符串呢? 有如下两种方法: (1) 使用万能的eval ...

day15-JavaScript字符串操作以及跑马灯示例