String笔记

2019-01-14 admin

前言

上一篇做了一下数组的总结,在总结的过程中重新巩固了对数组的方法的使用,很多以前没记住的细节也一一捡了起来,这一篇Sring笔记也是为了重新复习下String的相关定义和用法。

String

1 JavaScript的原生对象String 关于String作为原生对象和构造函数的区别,上一篇数组有过详细的解析。这里就直接开始分析这两种情况下的String的使用。

1-2 属性和方法使用

1-2-1 length属性返回String对象的长度。

这里的length属性只是String本身的length属性,其值为1。

1-2-2 name属性返回String对象名称。

与length属性一样,其值为"String"。

1-2-3 fromCharCode() 方法返回使用指定的Unicode值序列创建的字符串。

参数1:要转换的数据

String.fromCharCode(98,99,100);
// "bcd"

注意:作用于高位编码,返回简单的高位编码的字符串,例如阿拉伯数字等等。

1-2-4 fromCodePoint() 静态方法返回使用指定的代码点序列创建的字符串。

参数1:要转换的数据

String.fromCodePoint(0x2F804);
// "你"
String.fromCharCode(0x2F804);
// ""

注意:String.fromCodePoint()是ES6的新方法,被用来返回一对低位编码,从而可以完全表示这些高位编码字符。

2 作为函数调用

2-1 规范

字符串可以通过3个方式创建,字面量方式,String方法转化,以及String构造函数创建。

let str = "12";
let str2 = String("13");
console.log(typeof(str));
console.log(typeof(str2));
str.__proto__ === String.prototype;
str2.__proto__ === String.prototype;
// string
// string
// true
// true

let str1 = new String("12");
console.log(typeof(str1));
str1.__proto__ === String.prototype;
// object
// true

1、字面量方式创建的字符串和String方法转化的都是基本字符串。这些基本字符串没有属性和方法。而通过String构造函数创建的实例对象都是字符串对象,它继承String原型的上的属性和方法。 2、当基本字符串需要调用一个字符串对象才有的方法或者查询值的时候(基本字符串是没有这些方法的),JavaScript 会自动将基本字符串转化为字符串对象并且调用相应的方法或者执行查询。

2-2 参数

"value" 任何可以被转换成字符串的值。

2-3 实例方法

ES5原有方法 String.prototype.

2-3-1 charAt()

方法从一个字符串中返回指定索引的字符。

1个参数:

  • index 字符串的索引,取值为整数。(0 ~ length-1); 1、传入非数字或者不传则默认取索引为0的字符。 2、传入的数值大于取值范围(0 ~ length-1),返回空字符串。
let str = "123";
console.log(str.charAt(0));
console.log(str.charAt(1));
console.log(str.charAt(2));
console.log(str.charAt());
console.log(str.charAt("0"));
console.log(str.charAt(5));
// 打印结果
1
2
3
1
1
""

2-3-2 concat()

方法将一个或多个字符串与原字符串连接合并,形成一个新的字符串并返回。

多个参数:

  • string1, string2… 和原字符串连接的多个字符串。 1、返回新的字符串,不影响原来的字符串。
let str1 = "hello";
let str2 = "world";
let str3 = str1 + str2;
let str4 = str1.concat(str2);
console.log(str1);
console.log(str3);
console.log(str4);
let str5 = `${str1}:${str2}`
console.log(str5);

// 打印结果
"hello"
"helloworld"
"helloworld"
"hello:world"

1、性能上字符串拼接性能高于使用concat方法。 2、ES6的模板字符串拼接方便与其他未声明的字符串拼接。

2-3-3 indexOf()

方法返回调用String对象中第一次出现的指定值的索引,如果未找到该值,则返回-1。

2个参数:

  • string 指定查询的字符串。
  • index 表示调用该方法的字符串中开始查找的位置,取值为整数,默认值为0。

分两种情况

  1. 查找的值是非空字符串

    • index < 0 与传入默认值0返回结果一致。
    • 如果 index >= str.length,则该方法返回 -1。
  2. 查找的值是空字符串

    • index <= 0 时返回0。
    • 0 < index <= str.length时返回index的值。
    • index > str.length时返回str.length。
let str = "this is a question";
let findStr = "question";
let emptyStr = "";
console.log(str.indexOf(findStr));
console.log(str.indexOf(findStr, -1));
console.log(str.indexOf(findStr, 20));
console.log(str.indexOf("answer"));

console.log(str.indexOf(emptyStr, -1));
console.log(str.indexOf(emptyStr, 15));
console.log(str.indexOf(emptyStr, 20));
// 打印结果
10
10
-1
-1
0
15
18

2-3-4 lastIndexOf()

方法返回指定值在调用该方法的字符串中最后出现的位置,如果没找到则返回 -1。从该字符串的后面向前查找,从 index 处开始。

  • string 指定查询的字符串。
  • index 表示调用该方法的字符串中开始查找的位置,取值为整数,默认值为str.length。

分两种情况

  1. 查找的值是非空字符串

    • index < 0 则index = 0。
    • 如果 index > str.length,则index = str.length。
  2. 查找的值是空字符串

    • index <= 0 时返回0。
    • 0 < index <= str.length时返回index的值。
    • index > str.length时返回str.length。
let str = "this is a question";
let findStr = "question";
let emptyStr = "";
console.log(str.lastIndexOf(findStr));
console.log(str.lastIndexOf(findStr, 20));
console.log(str.lastIndexOf(findStr, -1));
console.log(str.lastIndexOf("answer"));

console.log(str.lastIndexOf(emptyStr, -1));
console.log(str.lastIndexOf(emptyStr, 15));
console.log(str.lastIndexOf(emptyStr, 20));
// 打印结果
10
10
-1
-1
0
15
18

2-3-5 slice()

方法提取一个字符串的一部分,并返回一新的字符串。提取的新字符串包括beginIndex但不包括endIndex。

2个参数:

  • beginIndex

    1. 开始提取字符串的索引位置,取值为整数。
    2. 如果为负数,则beginIndex = str.length + beginIndex;
    3. 如果省略该参数,beginIndex = 0。
  • endIndex

    1. 结束提取字符串的索引位置,取值为整数。
    2. 如果endIndex < 0,则endIndex= str.length + endIndex;
    3. 如果endIndex > str.length - 1,slice会一直提取到字符串末尾。
    4. 如果省略该参数,slice会一直提取到字符串末尾。
let str = "xiaohei like play basketball";
console.log(str.slice());
console.log(str.slice(0, 50));
console.log(str.slice(-3));
console.log(str.slice(0, -9));
// 打印结果
"xiaohei like play basketball"
"xiaohei like play basketball"
"all"
"xiaohei like play b"

2-3-6 split()

方法使用指定的分隔符字符串将一个String对象分割成字符串数组,以将字符串分隔为子字符串,以确定每个拆分的位置。不改变原有字符串。

2个参数:

  • separator

    1. 指定表示每个拆分应发生的点的字符串。
    2. 如果省略,会返回有含有整个字符串元素的数组;
    3. 如果分隔符为空字符串,则将str原字符串中每个字符的数组形式返回。
  • limitNumber

    1. 指定分割后返回数组的元素个数,取值为整数。
    2. 如果limitNumber< 0,则返回全部被分割的元素组成的数组;
    3. 如果limitNumber大于当前被分割的元素个数,则返回全部被分割的元素组成的数组。
    4. 如果limitNumber小于当前被分割的元素个数,则返回limitNumber个数的元素组成的数组。
    5. 如果省略该参数,则返回全部被分割的元素组成的数组。
let str = "asd,12,2,321,21"
console.log(str.split(",", 0));
console.log(str.split(",", -1));
console.log(str.split(","));
console.log(str.split(",", 3));
console.log(str.split(",", 6));

let str1 = "today is sunday";
console.log(str1.split());
console.log(str1.split(""));

//打印结果
[]
["asd", "12", "2", "321", "21"]
["asd", "12", "2", "321", "21"]
["asd", "12", "2"]
["asd", "12", "2", "321", "21"]

["today is sunday"]
["t", "o", "d", "a", "y", " ", "i", "s", " ", "s", "u", "n", "d", "a", "y"]

2-3-7 substring()

方法返回一个字符串在开始索引到结束索引之间字符串。不改变原有字符串。

2个参数:

  • startIndex

    1. 截取字符串开始的索引,为一个整数。
    2. startIndex = endIndex,返回一个空字符串。
    3. startIndex > endIndex 则 startIndex = endIndex 而 endIndex = startIndex。
    4. startIndex < 0 或者 startIndex = NaN, 则startIndex = 0。
    5. startIndex > str.length - 1 则 startIndex = str.length - 1。
  • endIndex

    1. 截取字符串结束的索引,为一个整数。
    2. endIndex < 0 或者 endIndex= NaN, 则 endIndex= 0。
    3. endIndex > str.length - 1 则 endIndex= str.length - 1。
let str = "qwertydf";
console.log(str.substring());
console.log(str.substring(1, 1));
console.log(str.substring(-1, 3));
console.log(str.substring(-1, 20));
console.log(str.substring(6, 0));

// 打印结果
"qwertydf"
""
"qwe"
"qwertydf"
"qwerty"

2-3-8 toUpperCase(),toLocaleUpperCase()

toUpperCase()

将调用该方法的字符串值转换为大写形式,并返回。

toLocaleUpperCase()

使用本地化(locale-specific)的大小写映射规则将输入的字符串转化成大写形式并返回结果字符串。

两个方法绝大多数情况下返回结果一致,对于一些特殊的语言会返回不同,(日常使用中没啥区别)。都不会改变原来字符串。

let str = "helloworld, HI";
str.toLocaleUpperCase(); // HELLOWORLD, HI
str.toUpperCase(); // HELLOWORLD, HI

2-3-9 toLowerCase(),toLocaleLowerCase()

toLowerCase()

将调用该方法的字符串值转换为小写形式,并返回。

toLocaleLowerCase()

使用本地化(locale-specific)的大小写映射规则将输入的字符串转化成小写形式并返回结果字符串。

两个方法绝大多数情况下返回结果一致,对于一些特殊的语言会返回不同,(日常使用中没啥区别)。都不会改变原来字符串。

let str = "helloworld, HI";
str.toLocaleLowerCase(); // helloworld, hi
str.toLowerCase(); // helloworld, hi

2-3-10 valueOf(),toString()

valueOf()

字符串或者字符串对象调用该方法返回的该字符串的基本字符串格式。

toString()

与valueOf使用方法一致。

上文中提到了字符串的两个基本格式,基本字符串和字符串对象,而基本字符串在使用实例方法时,javascript会把它转化成字符串对象后再调用方法。所以无论是基本字符串还是字符串对象调用这两个方法,本质上是没有区别的。valueOf() 方法通常在 JavaScript 内部被调用,而不是在代码里显示调用。

let baseStr = "baseString";
let objStr = new String("objectString");
console.log(baseStr.toString());
console.log(objStr);
console.log(objStr.valueOf());

// 打印结果
"baseString"
String {0: "o", 1: "b", 2: "j", 3: "e", 4: "c", 5: "t", 6: "S", 7: "t", 8: "r", 9: "i", 10: "n", 11: "g"}
"objectString"

2-3-11 trim()

方法会从一个字符串的两端删除空白字符。方法并不影响原字符串本身。

let str = "  test  ";
console.log(str.trim()); // test
console.log(str); // "  test  "

ES6新增方法 String.prototype.

2-3-12 includes()

方法用于判断一个字符串是否包含在另一个字符串中,根据情况返回 true 或 false。

2个参数:

  • string 指定查询的字符串。

  • index

    1. 开始查询的位置,取值为整数。
    2. 取值不正确或不填默认从0开始。
let str = "hello world";
let str1 = "world";
console.log(str.includes(str, 0));
console.log(str.includes(str1, 6));
console.log(str.includes(str1, 20));
console.log(str.includes(str1, "ads"));
// 打印结果
true
true
false
true

2-3-13 startWith()

方法用来判断当前字符串是否是以另外一个给定的子字符串“开头”的,根据判断结果返回 true 或 false。

2个参数:

  • string 指定查询的字符串。

  • index

    1. 开始查询的位置,取值为整数。
    2. 取值不正确或不填默认从0开始。
let str = "object is not found";
console.log(str.startsWith("object", 1));
console.log(str.startsWith("object"));
console.log(str.startsWith("object", "sadas"));
// 打印结果
false
true
true

2-3-13 endWith()

方法用来判断当前字符串是否是以另外一个给定的子字符串“结尾”的,根据判断结果返回 true 或 false。

2个参数:

  • string 指定查询的字符串。

  • index

    1. 开始查询的位置,取值为整数。
    2. 取值不正确或者不填默认字符串末尾是否已要查找的字符串结尾。
    3. 如果传值正确,则表示从str.length - index处往前的字符串是否以要查找的字符串结尾。
let str = "object,String";
console.log(str.endsWith("object")); // false
console.log(str.endsWith("String")); // true

// 从str.length - index往前的字符串
// 从7索引位置开始前面的字符串是否包含object
console.log(str.endsWith("object", 6)); // true

// 从6索引位置开始前面的字符串是否包含object
console.log(str.endsWith("object", 7)); // false

2-3-13 padStart(), padEnd()

方法用来在字符串头部/尾部补全不够指定长度的字符串,返回新的字符串,不改变原来字符串。

2个参数:

  • length

    1. 补全字符串的长度,取值为整数。
    2. 如果原字符串长度大于补全长度,则返回原字符串。
  • string

    1. 用来补全的字符串。
    2. 如果不填则以空字符串补全。
    3. 如果补全的字符串长度与原字符串长度相加大于了补全长度参数,则会截取大于补全长度的多余的补全字符串。
let str = "1";
console.log(str.padStart(3));
console.log(str.padEnd(3));
console.log(str.padStart(3, "2"));
console.log(str.padEnd(3, "2"));

let str1 = "abcdefg";
console.log(str1.padStart(10, "hijklm"));
console.log(str1.padEnd(10, "hijklm"));

let str2 = "09-12"
console.log(str2.padStart(10, "YYYY-MM-DD"));

let str3 = "abc";
console.log(str3.padStart(2));
console.log(str3.padEnd(2, "2222"));

// 打印结果
"  1"
"1  "
"221"
"122"

"hijabcdefg"
"abcdefghij"
"YYYY-09-12"

"abc"
"abc"

2-3-13 repeat()

方法用来把原字符串重复n次,返回新字符串。

2个参数:

  • number

    1. 指定重复的次数,取值为整数。
    2. 取值为0表示重复0次,返回空字符串。
    3. 取值为NaN或者(-1,0]则number = 0。
    4. 字符串转化成数字。
    5. 小于等于负一的数或者无限数都会报错。
    6. 小数直接取整。
let str = "a";
console.log(str.repeat(0));
console.log(str.repeat(2));
console.log(str.repeat(2.9));

console.log(str.repeat("asd"));
console.log(str.repeat(-0.9));

console.log(str.repeat("2"));

console.log(str.repeat(-1));
console.log(str.repeat(Infinity));
// 打印结果
""
"aa"
"aa"

""
""

"aaa"

"Uncaught RangeError: Invalid count value"
"Uncaught RangeError: Invalid count value"

由于正则这块忘得差不多了,所以String与正则相关的方法会在后续完成正则的复习后再加上

原文链接:https://segmentfault.com/a/1190000017881075

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-50945.html

文章标题:String笔记

相关文章
AngularJS基础知识笔记之表格
表格数据本质上通常是重复的。ng-repeat指令,可以用来方便地绘制表格。下面的示例说明使用ng-repeat指令来绘制表格。 &lt;table&gt; &lt;tr&gt; &lt;th&gt;Name&lt;&#x2F;t...
2017-03-23
AngularJS基础学习笔记之指令
AngularJS通过指令将HTML属性进行了扩展。 AngularJS指令 AngularJS指令是带有ng-前缀的扩展HTML属性。 ng-app指令用来初始化AngularJS application。 ng-init指令用来初始化a...
2017-03-23
js表格排序实例分析(支持int,float,date,string四种数据类型)
本文实例讲述了js表格排序的方法。分享给大家供大家参考。具体如下: &lt;html&gt; &lt;head&gt; &lt;title&gt;SortTable2&lt;&#x2F;title&gt; &lt;meta http-equ...
2017-03-23
AngularJS基础学习笔记之控制器
AngularJS控制器用来控制AngularJS applications的数据。 AngularJS控制器就是普通的JavaScript对象。 AngularJS控制器 AngularJS applications通过控制器进行控制。 ...
2017-03-23
AngularJS学习笔记之基本指令(init、repeat)
AngularJS学习笔记之基本指令(init、repeat) &lt;h3&gt;ng-init初始化变量&lt;&#x2F;h3&gt; &lt;div ng-init=&quot;name=&#x27;aurora&#x27;;age...
2017-03-24
Nodejs学习笔记之测试驱动
分享第二章,关于测试驱动。这里的测试主要针对Web后端的测试 —— 你为什么要写测试用例(即测试用例的完善是否是浪费时间),如何完善你的测试用例,代码设计如何简化测试用例的书写,以及一些后期的构想。 1. 你为什么要写测试用例 这个习惯通常...
2017-03-22
AngularJS学习笔记之ng-options指令
1.基本下拉效果(lable for value in array) 其中select标签中的ng-model属性必须有,其值为选中的对象或属性值。 &lt;div ng-controller=&quot;ngselect&quot;&gt...
2017-03-24
JavaScript学习笔记之DOM基础 2.4
DOM的发展,与WEB标准化的大趋势相关甚密。只有基于正确的语义逻辑,DOM才能正确地发挥其功用。如今,正确的语义结构、表现与内容分离等要求,都已经成为网页设计中的基本要求。因此,在网页前端开发中,DOM的存在,无疑是为表现层、行为层甚至内...
2017-03-29
javascript制作sql转换为stringBuffer的小工具
sql转换为stringBuffer的小工具,dao层拼接sql很麻烦,用这个小工具可以快速拼接,把写好的sql在sql工具中格式化好,然后复制进去就可以了 演示地址:http://runjs.cn/detail/fj14tpyu    有...
2017-03-22
AngularJS基础学习笔记之表达式
AngularJS通过表达式将数据绑定到HTML。 AngularJS表达式 AngularJS表达式写在双大括号中:{{ 表达式语句 }}。 AngularJS表达式绑定数据到HTML的方式与ng-bind指令的方式相同。 Angular...
2017-03-23
回到顶部