MENU

JavaScript 笔记(4)

2019 年 10 月 12 日 • 笔记

字符串🎲

JavaScript 字符串

JavaScript 字符串用于存储和操作文本。

字符串可以使用单引号或双引号声明:

var carname = "Porsche 911";
var carname = 'Porsche 911';

字符串长度

内建属性 length 可返回字符串的长度

var txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
document.getElementById("demo").innerHTML = txt.length;

特殊字符

在声明字符串中需要使用引号,而当字符串内也需要用到引号的时候就需要是\转义字符。

代码结果描述
''单引号
""双引号
\\反斜杠
var x = "中国是瓷器的故乡,因此 china 与\"China(中国)\"同名。"

其他六个 JavaScript 中有效的转义序列,但这六个转义字符最初设计用于控制打字机、电传打字机和传真机。它们在 HTML 中没有任何意义。

代码结果
b退格键
f换页
n新行
r回车
t水平制表符
v垂直制表符

长代码行换行

为了最佳可读性, 程序员们通常会避免每行代码超过 80 个字符串。

如果某条 JavaScript 语句不适合一整行,那么最佳换行位置是某个运算符之后:

document.getElementById("demo").innerHTML =
"Hello Kitty.";

也可以在字符串中换行,通过一个反斜杠即可:

document.getElementById("demo").innerHTML = "Hello \
Kitty!";

\方法并不是 ECMAScript (JavaScript) 标准。

某些浏览器也不允许 \ 字符之后的空格。

对长字符串换行的最安全做法(但是有点慢)是使用字符串加法:

document.getElementById("demo").innerHTML = "Hello" + 
"Kitty!";

不能通过反斜杠对代码行进行换行:

document.getElementById("demo").innerHTML = \ 
"Hello Kitty!";    //将无效

字符串可以是对象

通常字符串是原始值,通过字面方式创建:

var firstName = "Bill"

在创建时使用new可将其定义为对象:

var firstName = new String("Bill")

使用typeof y 将返回 object

将字符串创建为对象时,会拖慢运行的速度。new 关键字使代码复杂化。也可能产生一些意想不到的结果。

当使用 == 相等运算符时,相等字符串是相等的:

var x = "Bill";             
var y = new String("Bill");

// (x == y) 为 true,因为 x 和 y 的值相等

而使用===运算符运算时,相等字符串是不相等的,因为 === 运算符需要类型和值同时相等。

var x = "Bill";             
var y = new String("Bill");

// (x === y) 为 false,因为 x 和 y 的类型不同(字符串与对象)

甚至

var x = new String("Bill");             
var y = new String("Bill");

// (x == y) 为 false,因为 x 和 y 是不同的对象

JavaScript 对象无法进行对比,比较两个 JavaScript 将始终返回 false。

小结

  • 字符串用于存储和操作文本。
  • 内建属性 length 可返回字符串的长度。
  • 特殊字符可以使用\转义。
  • 字符串可以是对象,但是不推荐使用new这个关键字。

JavaScript 字符串方法

字符串方法可以更加方便处理字符串。

字符串长度

length属性返回字符串的长度,length 属性的值是一个 0 到 232-1 的整数。

var txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
document.getElementById("demo").innerHTML = txt.length;

length同样还能返回数组内数量:

var clothing = ['shoes', 'shirts', 'socks', 'sweaters'];
console.log(clothing.length);
// expected output: 4

查找字符串中的字符串

可以使用两个预设函数来查找字符串(区分大小写):

  • indexOf()
  • lastIndexOf()

indexOf()方法返回字符串中指定文本首次出现的索引(位置):

var str = "The full name of China is the People's Republic of China.";
var pos = str.indexOf("China");  //17
函数.indexOf("字符串");

JavaScript 从零计算位置。

0 是字符串中的第一个位置,1 是第二个,2 是第三个 ...

lastIndexOf()方法返回指定文本在字符串中最后一次出现的索引:

var str = "The full name of China is the People's Republic of China.";
var pos = str.lastIndexOf("China");  //51

使用方法与indexOf一样。

如果未找到文本, indexOf() lastIndexOf() 均返回 -1。

两种方法都接受作为检索起始位置的第二个参数。

var str = "The full name of China is the People's Republic of China.";
var pos = str.indexOf("China", 18);  //51

第一次出现再第17个字符,由于第二个参数定义为18,所以自18个字符后第一次出现为51字符位置。

lastIndexOf() 方法向后进行检索(从尾到头),这意味着:假如第二个参数是 50,则从位置 50 开始检索,直到字符串的起点。(结果字符串为从左到右正数)

var str = "The full name of China is the People's Republic of China.";
var pos = str.lastIndexOf("China", 50); //17

检索字符串中的字符串

search()方法搜索特定值的字符串,并返回匹配的位置:

var str = "The full name of China is the People's Republic of China.";
var pos = str.search("China"); //17

使用search()indexOf()结果是相等的

两种方法不同的地方在于:

  • search()方法无法设置第二个开始位置参数。
  • indexOf()方法无法设置使用正则表达式进行匹配。

提取部分字符串

  • slice(start,end)
  • substring(start,end)
  • substr(start,length)

slice()方法

slice()提取字符串的某个部分,并在新字符串中返回被提取出的部分。

改方法有两个设置参数:起始索引(位置),终止索引(位置)。空格和标点符号均算一个位置。

var str = "The full name of China is the People's Republic of China.";
var pos = str.slice(17,22);
console.log(pos);  //China

使用indexOf()或者search()得到的第一个“China”的位置为17,而17的位置是从0开始数的。slice()也是同样。

当参数为负数时,slice()则从字符串尾部开始计数。(也是从0开始计数)

var str = "The full name of China is the People's Republic of China.";
var pos = str.slice(-7,-1);  //China

如果省略第二个参数(结束位置),将裁剪字符串到整个字符串结尾。

var res = str.slice(7);  //str.slice(-7)

负值位置不适用 Internet Explorer 8 及其更早版本。

substring()方法

substring()类似于slice()。但是substring()不接受负值的索引位置。也就是说它不能从字符串尾部开始搜索。

var str = "Apple, Banana, Mango";
var res = str.substr(7,6);  //Banana

slice()相同,如果省略第二个索引参数,将裁剪到整个字符串结尾。

substr()方法

substr()类似与slice()

不同之处在于第二个参数规定的时被提取部分的长度。

var str = "Apple, Banana, Mango";
var res = str.substr(7,6);  //Banana

同样,如果省略第二个参数,substr()将裁剪到整个字符串结尾。

substr()也接受负值,也是从字符串尾部开始检索。而第二个参数不能为负,因为它定义的是长度。

var str = "Apple, Banana, Mango";
var res = str.substr(-5,2);  //Ma

替换字符串内容

replace方法是用另一个值替换在字符串中指定的值:

var w = 'test';
var rw = w.replace('test','txt');
console.log(rw)
VM383:3 txt

在html中替换DOM内的字符串内容:

    <div>
        <p id="test">谁才是天下第一<input type="button" onclick="renew()" value="???"></p>
    </div>
    <script>
        function renew() {
            var str = document.getElementById("test").innerHTML;
            var rew = str.replace("谁","小肥羊");
            document.getElementById("test").innerHTML = rew;
        }
     </script>

replace() 方法不会改变调用它的字符串。它返回的是新字符串。

默认情况下,replace只会替换首个匹配到值。

    <div>
        <p id="test">谁和谁才是天下第一<input type="button" onclick="renew()" value="???"></p>
    </div>
    <script>
        function renew() {
            var str = document.getElementById("test").innerHTML;
            var rew = str.replace("谁","小肥羊");
            document.getElementById("test").innerHTML = rew;
        }
    </script>

同时,replace对大小写是敏感的,可以按大小写不同来匹配。

str = "Please visit Microsoft!";
var n = str.replace("MICROSOFT", "W3School");

可以使用正则表达式来进行不敏感大小写的替换(/i)

    <div>
        <p id="test">HTML , CSS , JavaScript<input type="button" onclick="renew()" value="???"></p>
    </div>
    <script>
        function renew() {
            var str = document.getElementById("test").innerHTML;
            var rew = str.replace(/html/i,"小肥羊");
            document.getElementById("test").innerHTML = rew;
        }
    </script>

当使用正则表达式的时候,字符串是不需要带引号的。

同样使用正则表达式可以进行全局替换:

    <div>
        <p id="test">HTML , CSS , JavaScript , HTML  ,HTML<input type="button" onclick="renew()" value="???"></p>
    </div>
    <script>
        function renew() {
            var str = document.getElementById("test").innerHTML;
            var rew = str.replace(/html/gi,"小肥羊");
            document.getElementById("test").innerHTML = rew;
        }
    </script>

转换大小写及其他操作

  • toUpperCase()
  • toLowerCase()
  • concat()
  • trim()

toUpperCase()toLowerCase分别是转换为大写字母和小写字母。

    <p id="test">just test.<input type="button" onclick="upper()" value="Upper!"></p>
    <script>
        function upper(){
            var u = document.getElementById("test").innerHTML;
            var p = u.toUpperCase();
            document.getElementById("test").innerHTML = p;
        }
    </script>
    <p id="test">JUST TEST.<input type="button" onclick="lower()" value="Lower!"></p>
    <script>
        function lower(){
            var u = document.getElementById("test").innerHTML;
            var p = u.toLowerCase();
            document.getElementById("test").innerHTML = p;
        }
    </script>

concat() 连接两个或多个字符串:

    <p id="test"><input type="button" onclick="con()" value="con"></p>
    <script>
        function con(){
            var t1 = "Hello";
            var t2 = "World!";
            var t3 = t1.concat(" ",t2);
            document.getElementById("test").innerHTML = t3;
        }
    </script>

concat与加号运算字符串是相等的:

var text = "Hello" + " " + "World!";
var text = "Hello".concat(" ","World!");

所有的字符串方法都是返回新的字符串,不会修改原始的字符串。简单的来说就是字符串是不可变的,只能返回新的 (替换) ,不能修改。

trim()用于删除字符串中的空白符:

var str = "       Hello World!        ";
alert(str.trim());

Internet Explorer 8 或更低版本不支持 trim() 方法。

如需支持 IE 8,可搭配正则表达式使用 replace() 方法代替:

var str = "       Hello World!        ";
alert(str.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, ''));

甚至:

if (!String.prototype.trim) {
  String.prototype.trim = function () {
    return this.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, '');
};
var str = "       Hello World!        ";
alert(str.trim());

提取字符串字符

  • charAt()
  • charCodeAt()

charAt() 方法返回字符串中指定下标(位置)的字符串:

var str = "HELLO WORLD";
str.charAt(0);            // 返回 H

charCodeAt() 方法返回字符串中指定索引的字符 unicode 编码:

var str = "HELLO WORLD";
str.charCodeAt(0);         // 返回 72

属性访问(Property Access)

ECMAScript 5 (2009) 允许对字符串的属性访问 [ ]

var str = "HELLO WORLD";
str[0];                   // 返回 H

使用属性访问有点不太靠谱:

  • 不适用 Internet Explorer 7 或更早的版本
  • 它让字符串看起来像是数组(其实并不是)
  • 如果找不到字符,[ ] 返回 undefined,而 charAt() 返回空字符串。
  • 它是只读的。str[0] = "A" 不会产生错误(但也不会工作!)
var str = "HELLO WORLD";
str[0] = "A";             // 不产生错误,但不会工作
str[0];                   // 返回 H

如果需要按照数组的方式处理字符串,可以先将字符串转换为数组。

把字符串转换为数组

可以通过 split() 将字符串转换为数组:

var txt = "a,b,c,d,e";   // 字符串
txt.split(",");          // 用逗号分隔
txt.split(" ");          // 用空格分隔
txt.split("|");          // 用竖线分隔

如果省略分隔符,被返回的数组将包含 index [0] 中的整个字符串。

如果分隔符是 "",被返回的数组将是间隔单个字符的数组:

var str = "Hello";
var arr = str.split("");
var text = "";
var i;
for (i = 0; i < arr.length; i++) {        //i小于str的长度
  text += arr[i] + "<br>"    //循环输出
}
document.getElementById("demo").innerHTML = text;

JavaScript 数字

JavaScript只有一种数字类型,不想大多数编程语言还分整型和浮点型等。再书写时带不带小数点均可。

var x = 3.14;    // 带小数点的数值
var y = 3;       // 不带小数点的数值
var x = 123e5;    // 12300000

JavaScript 数值始终是 64 位的浮点数

与许多其他编程语言不同,JavaScript 不会定义不同类型的数,比如整数、短的、长的、浮点的等等。

JavaScript 数值始终以双精度浮点数来存储,根据国际 IEEE 754 标准。

此格式用 64 位存储数值,其中 0 到 51 存储数字(片段),52 到 62 存储指数,63 位存储符号:

值(aka Fraction/Mantissa)指数符号
52 bits(0 - 51)11 bits (52 - 62)1 bit (63)

精度

整数(不使用指数或科学计数法)会被精确到 15 位。

var x = 999999999999999;   // x 将是 999999999999999
var y = 9999999999999999;  // y 将是 10000000000000000

小数的最大数是 17 位,但是浮点的算数并不总是 100% 精准

var x = 0.2 + 0.1;         // x 将是 0.30000000000000004

或者使用乘法来计算小数:

var x = (0.2 * 10 + 0.1 * 10) / 10;       // x 将是 0.3

数字和字符串相加

JavaScript 的加法和级联(concatenation)都使用 + 运算符。数字用加法。字符串用级联。

如果对两个数相加,结果将是一个数:

var x = 10;
var y = 20;
var z = x + y;           // z 将是 30(一个数)

但如果是字符串和数字相加,结果将是一个字符串相联:

var x = 10;
var y = "20";
var z = x + y;           // z 将是 1020(一个字符串)

同样的,如果是字符串和数字相加,也是字符串相联:

var x = "10";
var y = 20;
var z = x + y;           // z 将是 1020(字符串)

但是js是从左向右编译的,如果是先遇到多个数字相加,再遇到字符串则会先运算数字:

var x = 10;
var y = 20;
var z = "30";
var result = x + y + z;

数字字符串

JavaScript 字符串可以拥有数字内容,将其用引号声明就是字符串:

var x = 100;         // x 是数字
var y = "100";       // y 是字符串

在除了加法运算之外的所有数学运算都会将字符串转换为数字进行运算:

var x = "100";
var y = "10";
var z = x / y;       // z 将是 10

var x = "100";
var y = "10";
var z = x * y;       // z 将是 1000

var x = "100";
var y = "10";
var z = x - y;       // z 将是 90

var x = "100";
var y = "10";
var z = x + y;       // z 不会是 110(而是 10010)

加法将会将字符串串联。

NaN - 非数值

NaN 属于 JavaScript 保留词,指示某个数不是合法数。

尝试用一个非数字字符串进行除法会得到 NaN(Not a Number):

var x = 100 / "Apple";  // x 将是 NaN(Not a Number)

可以使用全局函数isNaN()来确定某个数是否是函数:

var x = 100 / "Apple";
isNaN(x);               // 返回 true,因为 x 不是数

要小心 NaN。假如在数学运算中使用了 NaN,则结果也将是 NaN

var x = NaN;
var y = 5;
var z = x + y;         // z 将是 NaN

如果和字符串相加的话,可以是串联:

var x = NaN;
var y = "5";
var z = x + y;         // z 将是 NaN5

另外,NaN类型是数值(Number)

typeof NaN;             // 返回 "number"

Infinity

Infinity (或 -Infinity)是 JavaScript 在计算数时超出最大可能数范围时返回的值。

无穷大

var myNumber = 2;

while (myNumber != Infinity) {          // 执行直到 Infinity
    myNumber = myNumber * myNumber;
}

除以0的话,也会生成Infinity

var x =  2 / 0;          // x 将是 Infinity
var y = -2 / 0;          // y 将是 -Infinity

Infinity 是数:typeOf Infinity 返回 number

typeof Infinity;        // 返回 "number"

16进制

JavaScript 会把前缀为 0x 的数值常量解释为十六进制。

var x = 0xFF;             // x 将是 255

所以绝不要用前导零写数字(比如 07)。一些 JavaScript 版本会把带有前导零的数解释为八进制。默认地,Javascript 把数显示为十进制小数。

可以使用toString()来转换数字进制:

var myNumber = 32;
document.getElementById("demo").innerHTML =
"32 = " + "<br>" + 
" Decimal " + myNumber.toString(10) + "<br>" +
" Hexadecimal " + myNumber.toString(16) + "<br>" +
" Octal " + myNumber.toString(8) + "<br>" +
" Binary " + myNumber.toString(2);

数值可以是对象

没错,可以字符串一样,数值也可以是对象。同样可以使用new Number()来将数值声明为对象。

var x = 123;
var y = new Number(123);

// typeof x 返回 number
// typeof y 返回 object

同样的,使用new将数字也声明为对象将会拖慢运行速度。

new 关键词使代码复杂化,并产生某些无法预料的结果:

当使用 == 相等运算符时,相等的数看上去相等:

var x = 500;             
var y = new Number(500);

// (x == y) 为 true,因为 x 和 y 有相等的值

当使用 === 相等运算符后,相等的数变为不相等,因为 === 运算符需要类型和值同时相等。

var x = 500;             
var y = new Number(500);

// (x === y) 为 false,因为 x 和 y 的类型不同

甚至

var x = new Number(500);             
var y = new Number(500);

// (x == y) 为 false,因为对象无法比较

JavaScript 对象无法进行比较。

小结

  • JS只有一种数据类型;
  • 数值始终是64位的浮点数;
  • 精度默认是15位;
  • 一个数字和字符串相加将会是字符串相联;
  • NaN属性是Number,内建函数isNaN()可以确定某个值是否是数;
  • 前缀为 0x 的数值常量解释为十六进制;
  • 数值可以是对象,但是不推荐使用new这个关键字。;

JavaScript 数字方法

Number 方法和属性

原始值(比如 3.14 或 2016),无法拥有属性和方法(因为它们不是对象)。但是通过 JavaScript,方法和属性也可用于原始值,因为 JavaScript 在执行方法和属性时将原始值视作对象。

toString() 方法

toString()字符串返回数值。所有数字方法可用于任意类型的数字(字面量、变量或表达式):

var x = 123;
x.toString();            // 从变量 x 返回 123
(123).toString();        // 从文本 123 返回 123
(100 + 23).toString();   // 从表达式 100 + 23 返回 123

同时toString()还能转换数字进制:

var myNumber = 32;
document.getElementById("demo").innerHTML =
"32 = " + "<br>" + 
" Decimal " + myNumber.toString(10) + "<br>" +
" Hexadecimal " + myNumber.toString(16) + "<br>" +
" Octal " + myNumber.toString(8) + "<br>" +
" Binary " + myNumber.toString(2);

toExponentail()方法

toExponential() 返回字符串值,它包含已被四舍五入并使用指数计数法的数字。参数定义小数点后的字符数:

var x = 9.656;
x.toExponential(2);     // 返回 9.66e+0
x.toExponential(4);     // 返回 9.6560e+0
x.toExponential(6);     // 返回 9.656000e+0

该参数是可选的。如果您没有设置它,JavaScript 不会对数字进行舍入。

返回的值将不再是数值,而是字符串。

var x = 9.656;
var a = x.toExponential(2);
document.getElementById("demo").innerHTML = typeof a + "<br>" +  //String
typeof x;  //Number

toFixed() 方法

toFixed()和上述两种方法同样都是返回字符串值。它返回的是包涵了指定位数小数的值:

var x = 9.656;
x.toFixed(0);           // 返回 10
x.toFixed(2);           // 返回 9.66
x.toFixed(4);           // 返回 9.6560
x.toFixed(6);           // 返回 9.656000

值为0时,四舍五入。toFixed(2) 非常适合处理金钱。

toPrecision() 方法

toPrecision()也是返回字符串值,它是包含了指定长度的数字,而toFixed()是指定位数的小数:

var x = 123.1;
document.getElementById("demo").innerHTML = 
  x.toPrecision() + "<br>" +  //123.1
  x.toPrecision(2) + "<br>" +  //1.2e+2
  x.toPrecision(4) + "<br>" +  //123.1
  x.toPrecision(6);    //123.100

toFixed()不会处理整数:

var x = 123;
document.getElementById("demo").innerHTML =
  x.toFixed(0) + "<br>" +  //123
  x.toFixed(2) + "<br>" +  //123.00
  x.toFixed(4) + "<br>" +  //123.0000
  x.toFixed(6);   //123.000000

valueOf() 方法

valueOf()以数值返回数值,与上述几个方法不同的是,valueOf()将会返回数值:

var x = 123;
x.valueOf();            // 从变量 x 返回 123
(123).valueOf();        // 从文本 123 返回 123
(100 + 23).valueOf();   // 从表达式 100 + 23 返回 123
typeof x.valueOf();       // Number

在 JavaScript 中,数字可以是原始值(typeof = number)或对象(typeof = object)。在 JavaScript 内部使用 valueOf() 方法可将 Number 对象转换为原始值。没有理由在代码中使用它。

所有 JavaScript 数据类型都有 valueOf()toString() 方法。

把变量转换为数值

这三种 JavaScript 方法可用于将变量转换为数字:

  • Number() 方法
  • parseInt() 方法
  • parseFloat() 方法

这些方法并非数字方法,而是全局 JavaScript 方法。

全局方法

JavaScript 全局方法可用于所有 JavaScript 数据类型。这些是在处理数字时最相关的方法:

方法描述
Number()返回数字,由其参数转换而来。
parseFloat()解析其参数并返回浮点数。
parseInt()解析其参数并返回整数。

Number() 方法

Number() 可用于把 JavaScript 变量转换为数值:

var x = true;
var y = false;
var a = "10";
var b = 1.1;
var c = "10 20";
document.getElementById("demo").innerHTML = 
Number(x) + "<br>" +     //1
Number(y) + "<br>" +     //0
Number(a) + "<br>" +     //10
Number(b) + "<br>" +     //1.1
Number(c);     //NaN

纯数字的字符串可以转换为数值,包涵任何其他字符串的字符串无法转换。空格也不会自动删除。如果无法转换数字,则返回NaN

Number()还能对日期进行操作:

var x = new Date("2017-09-30");
document.getElementById("demo").innerHTML = Number(x); 

返回的数值是 1970 年 1 月 1 日至今的毫秒数。

parseInt() 方法

parseInt()解析一段字符串并返回数值。允许空格。只返回首个数字:

parseInt("10");         // 返回 10
parseInt("10.33");      // 返回 10
parseInt("10 20 30");   // 返回 10
parseInt("10 years");   // 返回 10
parseInt("years 10");   // 返回 NaN

parse(从语法上分析)

如果无法转换为数值,则返回 NaN (Not a Number)。

parseFloat() 方法

parseFloat()解析一段字符串并返回数值。允许空格。只返回首个数字:

parseFloat("10");        // 返回 10
parseFloat("10.33");     // 返回 10.33
parseFloat("10 20 30");  // 返回 10
parseFloat("10 years");  // 返回 10
parseFloat("years 10");  // 返回 NaN

如果无法转换为数值,则返回 NaN (Not a Number)。与parseInt()不同的是parseFloat()能够转换小数。

数字属性

属性描述
MAX_VALUE返回 JavaScript 中可能的最大数。
MIN_VALUE返回 JavaScript 中可能的最小数。
NEGATIVE_INFINITY表示负的无穷大(溢出返回)。
NaN表示非数字值("Not-a-Number")。
POSITIVE_INFINITY表示无穷大(溢出返回)。

MIN_VALUE 和 MAX_VALUE

MAX_VALUE 返回 JavaScript 中可能的最大数字。

var x = Number.MAX_VALUE;

MIN_VALUE 返回 JavaScript 中可能的最小数字。

var x = Number.MIN_VALUE;

POSITIVE_INFINITY和NEGATIVE_INFINITY

POSITIVE_INFINITY表示无穷大。

var x = Number.POSITIVE_INFINITY;

当正数除以0溢出的时候返回INFINTY:

var x = 1 / 0;

NEGATIVE_INFINITY表示负的无穷大。

var x = Number.NEGATIVE_INFINITY;

当负数除以0溢出的时候返回 -Infinity

var x = -1 / 0;

NaN - 非数字

NaN(Not a Number)属于 JavaScript 保留字,指示数字并非合法的数字。 尝试使用非数字字符串进行算术运算将导致 NaN(非数字):

var x = 100 / "Apple";  // x 将是 NaN (Not a Number)
最后编辑于: 2019 年 11 月 02 日
返回文章列表 文章二维码
本页链接的二维码
打赏二维码