JavaScript 学习笔记 1.数字+2.字符串+3.一个小练习替换字符

最新推荐文章于 2022-09-01 15:05:03 发布

点点滴滴25

最新推荐文章于 2022-09-01 15:05:03 发布

阅读量204

点赞数

分类专栏： JavaScript学习

本文链接：https://blog.csdn.net/qq_41325698/article/details/102611446

版权

JavaScript学习专栏收录该内容

8 篇文章 0 订阅

订阅专栏

1.数字

2.字符串

3.一个小练习替换字符

JavaScript中的对象是有着属性和方法的一种特殊数据类型。
常见的对象有数字Number，字符串String，日期Date，数组Array等。

1.数字

这里讲的Number是对象Number,和基本数据类型中的基本类型Number是不一样的Number。

创建一个数字对象

可以通过new Number()创建一个数字对象
与基本类型的数字不同，对象类型的数字，拥有更多的属性和方法

<script>
 
var x = new Number(123);
 document.write('数字对象x的值:'+x);
 document.write("<br>");
 document.write('数字对象x的类型:'+typeof x); //通过typeof 获知这是一个object
 document.write("<br>");
var y = 123;
 document.write('基本类型y的值:'+y);
 document.write("<br>");
 document.write('基本类型y的类型:'+typeof y); //通过typeof 获知这是一个number
 
</script>

NaN表示不是数字

NaN(Not a Number),表示不是一个数字
当通过非数字创建Number的时候，就会得到NaN.
注意：不能通过是否等于Number.NaN来判断是否 “不是一个数字”，应该使用函数 isNaN()

<script>
function p(s){
  document.write(s);
  document.write("<br>");
}
 
var a = new Number("123abc"); //通过非数字创建Number对象，得到的是一个NaN
p('通过非数字字符串"123abc"创建出来的Number对象 a的值是：'+a);
 
p('但是, a==Number.NaN会返回:'+(a==Number.NaN)); //即便是一个NaN 也"不等于" Number.NaN
 
p('正确判断是否是NaN的方式是调用isNaN函数:'+isNaN(a)); //正确的方式是通过isNaN() 函数进行判断
 
</script>

toFixed返回一个数字的小数表达

数字对象3.1415926通过toExponential 返回计数法表达 3.1415926e+0

方法 valueOf() 返回一个基本类型的数字
通过typeof 判断数据类型可以发现，一种是object,一种是number

<script>
function p(s){
  document.write(s);
  document.write("<br>");
}
 
var a = new Number("123");
 
var b = a.valueOf();
 
p('数字对象a的类型是: '+typeof a); //返回object
p('通过valueOf()返回的值的类型是'+typeof b); //返回number
 
</script>

2.字符串

与数字类似，基本类型String也有一个对应的String 对象，并且提供了很多有用的方法。

charAt 返回指定位置的字符
charCodeAt 返回指定位置的字符对应的Unicode码

concat用于进行字符串拼接

<script>
 
var x = new String("Hello ");
var y = new String("Javascript");
 
document.write( '字符串x的值: '+x);
document.write('<br>');
document.write( '字符串y的值: '+y);
document.write('<br>');
document.write( '通过函数concat()把x和y连接起来: ' +  x.concat(y) );
 
</script>

indexOf 返回子字符串第一次出现的位置
lastIndexOf 返回子字符串最后一次出现的位置

<script>
   
var y = new String("Hello JavaScript");
document.write( '字符串y的值: '+y);
document.write('<br>');
document.write('通过 indexOf ("a")获取子字符"a" 第一次出现的位置 '+y.indexOf ("a"));
document.write('<br>');
document.write('通过 lastIndexOf ("a")获取子字符"a" 最后出现的位置 '+y.lastIndexOf ("a"));
</script>

localeCompare 比较两段字符串是否相同，0即表示相同，非0表示不同

document.write('通过 localeCompare()判断 x和y是否相等 '+x.localeCompare(y));
document.write('<br>');
document.write('通过 localeCompare()判断 x和z是否相等 '+x.localeCompare(z));
document.write('<br>');

字符串x的值: Hello JavaScript
x.substring (0,3) 获取位0到3的字符串： Hel
左闭右开，取得到0，取不到3

split 根据分隔符，把字符串转换为数组。
注：第二个参数可选，表示返回数组的长度

字符串x的值: Hello This Is JavaScript
通过空格分隔split(" "),得到数组Hello,This,Is,JavaScript
通过空格分隔split(" ",2),得到数组，并且只保留前两个Hello,This

replace(search,replacement)
找到满足条件的子字符串search，替换为replacement

注: 默认情况下只替换找到的第一个子字符串，如果要所有都替换，需要写成：

var regS = new RegExp("a","g");

x.replace(regS, "o");

<script>
function p(s){
  document.write(s);
  document.write("<br>");
}
  
var x = new String("Hello JavaScript");
p('这个是原字符串: '+x);
var y = x.replace("a","o");
p('只替换第一个 a:  '+y);
var regS = new RegExp("a","g");
var z = x.replace(regS, "o");
p('替换掉所有的 a:  '+z);
 
</script>

3.一个小练习替换字符

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/js1.js"></script>
        <link rel="stylesheet" type="text/css" href="css/cs_1.css" />
	</head>
 	<body>
        <div align="left">
        	<font  style="font-family: 楷体;">字符串替换工具</font>
        	<table>
        		<tr>
        			<td>源字符串：</td>
        			<td>
        				<textarea name="" rows="5" cols="25" id="tstr">
        				
        				</textarea>
        			</td>
        		</tr>
        		<tr>
        			<td>查询：</td>
        			<td><input type="text" name="" id="search" value="" /></td>
        		</tr>
        		<tr>
        			<td>替换为：</td>
        			<td><input type="text" name="" id="copy" value="" /></td>
        		</tr>
        		<tr>
        			<td>替换结果：</td>
        			<td>
        				<textarea name="" rows="5" cols="25" id="res"></textarea>
        			</td>
        		</tr>
        		<tr>
        			<td colspan="2"><div align="center"><button type="button" id="G0" onclick="run()">替换</button></div></td>
        		</tr>
        	</table>
        	
        </div>
		 
	</body>
</html>

function get(id)
{
	return document.getElementById(id).value;
}
function run(){
	var str=new String(get("tstr"));
	var sea_str=new String(get("search"));
	var cp_srt=new String(get("copy"));
	var temp=new RegExp(sea_str,"g");
	
	document.getElementById("res").value=str.replace(temp,cp_srt);
}