整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

JavaScript 内置对象之-String

JavaScript 内置对象之-String

符串的创建方式:

var a1='abc';  			 // 字面量

var a2=new String('abc');  // 构造函数

typeof a1;       			 // "string"

typeof a2;     			     // "object"

// 上面代码中,变量s1是字符串,s2是对象。所以,String对象也叫包装对象。

除了用作构造函数,String对象还可以当作工具方法使用;

将任意类型的值转为字符串。

String(true); // "true"

String(5); // "5"

// 上面代码将布尔值ture和数值5,分别转换为字符串

①.length属性:

字符串实例的length属性返回字符串的长度。

例:

'abcdefg'.length    // 7

字符串对象是一个类似数组的对象(很像数组,但不是数组)。

new String('cba');

// String {0: "c", 1: "b", 2: "a", length: 3}
(new String('cba'))[1] // "b"

// 上面代码中,字符串cba对应的字符串对象,有数值键(0、1、2)和length属性,

// 所以可以像数组那样取值。

②charAt()方法:

charAt方法返回指定位置的字符,参数是从0开始编号的位置。

var a=new String("abc");

a.charAt(1);				 // "b"

a.charAt(a.length - 1);   // "c"

// 这个方法完全可以用数组下标来替代。

'abc'.charAt(1); 		 // "b"

'abc'[1];				 // "b"

③slice()方法:

slice方法是用于从原来的字符串中取出子字符串并返回,且不改变原字符串。它的第一个参数是子字符串的开始位置,第二个参数是子字符串的结束位置(注意:不包含该位置)。

'abcdefghij'.slice(0, 4);			// "abcd"

// 如果省略第二个参数,则表示子字符串一直到原字符串结束。

'abcdefghij'.slice(4); 			// "efghij"

// 如果参数是负值,表示从结尾开始倒数计算的位置,即该负值加上字符串长度。

'abcdefghij'.slice(-6); 		// "efghij"

'abcdefghij'.slice(0, -6);		// "abcd"

'abcdefghij'.slice(-2, -1); 	// "i"

// 如果第一个参数大于第二个参数,slice方法返回一个空字符串。

'abcdefghij'.slice(2, 1);

④substring()方法:

substring方法用于从原字符串取出子字符串并返回,不改变原字符串,跟slice()方法很相像。它的第一个参数表示子字符串的开始位置,第二个位置表示结束位置(注意:返回结果不含该位置)。

'abcdefghij'.substring(0, 4);  // "abcd"

// 如果省略第二个参数,则表示子字符串一直到原字符串的结束。

'abcdefghij'.substring(4);	  // "efghij"

// 如果第二个参数大于第一个参数,substring方法会自动更换两个参数的位置。

'abcdefghij'.substring(10, 4); // "efghij"

// 等同于

'abcdefghij'.substring(4, 10); // "efghij"

⑤substr()方法:

substr()方法用于从原字符串取出子字符串并返回,不改变原字符串,跟slice()和substring()方法的作用相同。

substr()方法的第一个参数是子字符串的开始位置(从0开始计算),第二个参数是子字符串的长度。

'abcdefghij'.substr(4, 6);	 // "efghij"

// 如果省略第二个参数,则表示子字符串一直到原字符串的结束。

'abcdefghij'.substr(4); 		 // "efghij"

// 如果第一个参数是负数,表示倒数计算的字符位置。如果第二个参数是负数,将被自动转为0,

// 因此会返回空字符串。

'abcdefghij'.substr(-6);	// "efghij"

'abcdefghij'.substr(4, -1); // ""

// 上面代码中,第二个例子的参数-1自动转为0,表示子字符串长度为0,所以返回空字符串

⑥trim()方法:

trim()方法用于去除字符串两端的空格,返回一个新字符串,且不改变原字符串。

"  hello world  ".trim();

// "hello world"

// 该方法去除的不仅是空格,还包括制表符(\t、\v)、换行符(\n)和回车符(\r)。

'\r\naaa \t'.trim(); // 'aaa'

⑦toLowerCase()、toUpperCase()方法:

toLowerCase()方法用于将一个字符串全部转为小写,toUpperCase()则是用于将一个字符串全部转为大写。

它们都返回一个新字符串,且不改变原字符串。

'ABC'.toLowerCase();

// "abc"

'abc'.toUpperCase();

// "ABC"

⑧replace()方法:

replace()方法用于替换匹配的子字符串,一般情况下只替换第一个匹配(带有g修饰符的正则表达式除外)。

'aaa'.replace('a', 'b')	 	 // "baa"

'aaa'.replace(/a/g, 'b')	 // "bbb"

⑨split()方法:

split()方法按照给定规则分割字符串,返回一个由分割出来的子字符串组成的数组。

者 | Jonathan Saring

编辑 | 无明

JavaScript 仍然是 2018 年最受欢迎和使用最为广泛的编程语言,因此 JavaScript 生态系统也会继续发展壮大。

然而,JavaScript 的标准库仍然继续保持“短小精悍”的身材。为了填补标准库功能方面的空白,在过去几年中,GitHub 上出现了很多流行的 JavaScript 库。以下列出了 11 个有用的库,这些库的维护状态均很活跃。

1.Underscore 和 Lodash(dah)

可能大多数人都知道这两个库。Underscore 的目的是为 JavaScript 中的常见任务提供实用的函数。Lodash 是下载量最大和被依赖最多的库之一,旨在为数组、字符串、object 和 argument 对象提供更一致的跨环境迭代支持,并已成为 Underscore 的超集。这两个库由相同的核心贡献者维护,在技术选型时完全可以考虑使用它们。

Lodash - https://github.com/lodash/lodash

Underscore - https://github.com/jashkenas/underscore

2. Ramda

在 GitHub 上的 Star 已经超过 12,000,这个库专为函数式编程而设计,可以轻松创建不改变用户数据状态的函数式管道。Ramda 的核心设计理念是创建具有不变性和无副作用的函数。所有的函数会被自动柯里化,并根据易用性安排参数的顺序。

Ramda - https://github.com/ramda/ramda

3. MathJS

在 GitHub 上的 Star 已经超过 6000,这个库是 JavaScript 和 Node.js 的数学扩展库,与 JavaScript 内置的 Math 库兼容。该库包含一个灵活的表达式解析器,能够运行符号计算,并提供了一系列内置函数和常量。用户还可以对其进行扩展。

MathJS - https://github.com/josdejong/mathjs

4. Moment

在 GitHub 上的 Star 已经超过 37,000,是一个 JavaScript 日期和时间操作库,用于解析、验证、操作和格式化日期。Moment 可以在浏览器和 Node.js 中运行。从 2.10.0 版本开始迁移到 ECMAScript 6。

Moment - https://github.com/moment/moment

另外两个同类的库:

Date-fns(10,000 个 Star)- https://github.com/date-fns/date-fns

DateJS - https://github.com/datejs/Datejs

5. Sugar

在 GitHub 上的 Star 已经超过 3500,主要用于处理本地对象。这个库支持自定义构建,还提供了模块化的 npm 包,因此可以只使用其中必要的部分模块(也可以与 Bit 结合使用),用户还可以通过自定义方法或使用插件来应对特定的使用场景。

Sugar - https://github.com/andrewplummer/Sugar

6. Lazy

在 GitHub 上的 Star 将近 5000,是一个功能强大的 JavaScript 库,它的 lazy 引擎“尽可能地少做一些工作”,同时保持足够的灵活性。

Lazy - https://github.com/dtao/lazy.js

7. CollectJS

在 GitHub 上的 Star 超过 3200,主要用于处理 JavaScript 中的数组和对象,无需其他依赖,提供了几十个有用的功能和 API,这些 API 几乎与 Laravel Collections 5.5 相同。该库的维护状态很活跃,值得关注。

CollectJS - https://github.com/ecrmnn/collect.js

8. ChanceJS

Chance 在 GitHub 上的 Star 超过 3200,一个简单的随机对象生成器,用于生成随机的字符串、数字等。在编写自动化测试代码或任何需要随机对象的地方,可以用它来减少单调的工作。

ChanceJS - https://github.com/chancejs/chancejs

9. ChartJS

在 GitHub 上的 Star 将近 40,000 个,提供了 8 种不同类型的数据可视化,每种类型都支持动画和定制。借助 Chart.js,我们可以使用<canvas>标签创建简单的HTML5图表,而且在所有现代浏览器中都具有出色的渲染性能。

ChartJS - https://github.com/chartjs/Chart.js

10. Polished

在 GitHub 上的 Star 超过 3500 个,由 styled-components 团队开发,是一个非常优秀的轻量级工具集,支持使用 JavaScript 编写具有 SASS 风格辅助函数和 mixin 的样式。该库与 styled-components、Aphrodite、Radium 或简单的内联样式兼容。这个库可以在 GitHub 上找到,Bit 社区(非官方)也单独提供所有的功能,因此可以单独安装、导入和使用。

Polished - https://github.com/styled-components/polished

Bit 社区提供的单独安装版 - https://bitsrc.io/ranm8/polished

11. Mout

Mout.js 是一组模块化的 JavaScript 库,可以在浏览器或 node.js 中运行,提供类似于其他语言标准库(Python、Ruby、PHP 等)中的辅助方法。mout.js 允许仅加载必需的模块或函数,并提供了一致的 API,规范了跨浏览器行为。

Mout - https://github.com/mout/mout

特别推荐

Bit utils

一个模块化和高性能的库,已经被用在 Bit 的 web hub 中。这些函数可使用 NPM/Yarn 进行单独安装,用户也可以创建自己的集合,并从不同的库和项目中收集有用的功能。

Bit utils - https://bitsrc.io/bit/utils

Voca

一个用于操作字符串的 JavaScript 库。它提供的功能包括大小写转换、trim、pad、slugify、latinise、sprintf、truncate、escape 等。用户可以加载单个函数,以便最小化应用程序的构建。该库具有很高的测试覆盖率,并且不依赖其他库。

Voca - https://github.com/panzerdp/voca

Licia

只有 400 个 Star,这个有趣的项目基本上是一个简单但有用的 JavaScript 片段集合,具有很高的测试覆盖率,文档也很齐全。

Licia - https://github.com/liriliri/licia

下是JavaScript的一些内置对象代码示例:

1.Math对象:

// 返回随机数
Math.random();

// 返回1和10之间的随机整数
Math.floor(Math.random() * 10) + 1;

// 返回数字的平方根
Math.sqrt(25);

2.Date对象:

// 创建一个表示当前时间的Date对象
const today=new Date();

// 创建一个指定日期的Date对象
const christmas=new Date(2023, 11, 25);

// 返回当前月份
today.getMonth();

// 返回当前年份
today.getFullYear();

3.Array对象:

// 创建一个数组
const fruits=['apple', 'banana', 'orange'];

// 添加元素到数组末尾
fruits.push('grape');

// 删除数组末尾的元素
fruits.pop();

// 获取数组长度
fruits.length;

4.String对象:

// 创建一个字符串
const greeting='Hello, world!';

// 获取字符串长度
greeting.length;

// 将字符串转换为大写
greeting.toUpperCase();

// 获取子字符串
greeting.slice(0, 5); // 'Hello'

5.RegExp对象: