创建字符串
字面量创建
var str1 = "hello world"
console.log(str1,typeof str1)
//hello world string
//这种方式创建，类型是string，基本数据类型
var strBreakLine = "hello \
world"
console.log(strBreakLine) //hello world --> 换行在换行出加上\，如果是模板字符串，就不用加
构造函数创建
var str2 = new String("hello universe")
console.log(str2,typeof str2)
//String {'hello universe'} 'object'
字符串属性
length属性
- length 属性：返回字符串的长度，只读属性，不能修改
- 字符串string虽然是基本数据类型，但依然可以使用String对象的方法，string在调用length的时候，会转换为String对象，调用结束后，回到原本的基本数据类型状态
var str1 = "hello world"
console.log(str1) //hello world
console.log(str1.length) //11
str1.length = 5
console.log(str1.length) //11 --> length是只读属性，不能修改
索引/下标
- string可以像数组那样通过下标索引获取组成字符串的字符
var str = "hello world"
//通过下标获取组成字符串的每个字符
var charArr = []
for(i=0;i<str.length;i++){
charArr.push(str[i])
}
console.log(charArr)
//(11) ['h', 'e', 'l', 'l', 'o', ' ', 'w', 'o', 'r', 'l', 'd']
var str = "access"
//统计字符串中的字符数
var charNum = {}
for(i=0;i<str.length;i++){
key = str[i]
if(charNum[key]){
charNum[key]++
} else {
charNum[key] = 1
}
}
console.log(charNum)
//{a: 1, c: 2, e: 1, s: 2}
字符串方法
字符 charAt()
- charAt() 方法从一个字符串中返回指定的字符
var str = "access"
/**charAt() 方法从一个字符串中返回指定的字符
* 语法：str.charAt(index)
* 返回：对应字符
* 参数说明：
* index：
* 取值为 0~length-1 如果没有提供索引，charAt() 将使用 0
* 如果指定的 index 值超出了该范围，则返回一个空字符串。
*/
//输出字符串中不同位置的字符
console.log(str.charAt(1)) //c
console.log(str.charAt(5)) //s
编码 charCodeAt()
charCodeAt()方法返回 0 到 65535 之间的整数，表示给定索引处的 UTF-16 代码单元
var str = "access"
/**charCodeAt() 方法返回 0 到 65535 之间的整数，表示给定索引处的 UTF-16 代码单元
* UTF-16 编码单元匹配能用一个 UTF-16 编码单元表示的 Unicode 码点
* 如果 Unicode 码点不能用一个 UTF-16 编码单元表示（因为它的值大于0xFFFF），
* 则所返回的编码单元会是这个码点代理对的第一个编码单元)
* Unicode 码点（code points）的范围从 0 到 1114111 (0x10FFFF），
* 开头的 128 个 Unicode 编码单元和 ASCII 字符编码一样。
* 返回：UTF-16 代码单元值的一个数字，超出此范围返回 NaN
* 语法：str.charCodeAt(index)
* 参数：大于等于 0，小于字符串长度，如果不是一个数值，则默认为 0
*/
for (const index in str) {
console.log(str.charAt(index)+" - "+str.charCodeAt(index))
}
//a - 97
//c - 99
//c - 99
//e - 101
//s - 115
//s - 115
大小写 toUpperCase() toLowerCase()
/**toUpperCase() 方法将调用该方法的字符串转为大写形式并返回
* （如果调用该方法的值不是字符串类型会被强制转换）
* toLowerCase() 会将调用该方法的字符串值转为小写形式，并返回
* 返回：新的字符串，表示转换为大/小写的字符串
* 此方法不会影响原字符串本身的值，因为 JavaScript 中字符串的值是不可改变的
* 语法：str.toUpperCase()
*/
//先转换为大写，在转换为小写
console.log("access".toUpperCase()) //ACCESS
console.log("access".toLowerCase()) //access
//转换为首字母大写，其余小写
var str = "FroM"
var strResult = str.charAt(0).toUpperCase();
for(i=1;i<str.length;i++){
strResult += str.charAt(i).toLowerCase()
}
console.log(strResult) //From
截取 substr() substring() slice()
- substr() 方法返回一个字符串中从指定位置开始到指定字符数的字符。
substr(m,n)从索引m开始，截取n个
/**substr() 方法返回一个字符串中从指定位置开始到指定字符数的字符
* 返回：多个字符组成的字符串
* 语法：str.substr(start[, length])
* 参数说明：从 start 位置开始提取字符，提取 length 个字符（或直到字符串的末尾）
* start：
* 字符索引，首字符的索引为 0，最后一个字符的索引为字符串的长度减去 1
* 如果 start 为正值，且大于或等于字符串的长度，则 substr 返回一个空字符串
* 如果 start 为负值，则 substr 把它作为从字符串末尾开始的一个字符索引
* 如果 start 为负值且 abs(start) 大于字符串的长度，则 substr 使用 0 作为开始提取的索引
* 注意负的 start 参数不被 Microsoft JScript 所支持。
* length：可选
* 如果 length 为 0 或负值，则 substr 返回一个空字符串。
* 如果忽略 length，则 substr 提取字符，直到字符串末尾。
*/
var str = "127.0.0.1:5500/demo.html"
console.log("substr(1,2) "+str.substr(1,2)) //substr(1,2) 27
console.log("substr(-3,2) "+str.substr(-3,2)) //substr(-3,2) ml
console.log("substr(-3) "+str.substr(-3)) //substr(-3) tml
console.log("substr(1) "+str.substr(1)) //substr(1) 27.0.0.1:5500/demo.html
console.log("substr(-30,2) "+str.substr(-30,2)) //substr(-30,2) 12
console.log("substr(30,2) "+str.substr(30,2)) //substr(30,2) ""
- substring() 方法返回一个字符串在开始索引到结束索引之间的一个子集，或从开始索引直到字符串的末尾的一个子集
substring(m,n)从索引m开始，截取到索引n处，不包含n
/**substring() 方法返回一个字符串在开始索引到结束索引之间的一个子集，
* 或从开始索引直到字符串的末尾的一个子集。
* 返回：新字符串
* 语法：str.substring(indexStart[, indexEnd]) --> 前闭后开
* 参数说明：
* indexStart
* 需要截取的第一个字符的索引，该索引位置的字符作为返回的字符串的首字母
* indexEnd 可选
* 一个 0 到字符串长度之间的整数，以该数字为索引的字符 不包含 在截取的字符串内
* 如果 indexStart 等于 indexEnd，substring 返回一个空字符串
* 如果省略 indexEnd，substring 提取字符一直到字符串末尾
* 如果任一参数小于 0 或为 NaN，则被当作 0
* 如果任一参数大于 stringName.length，则被当作 stringName.length
* 如果 indexStart 大于 indexEnd，则 substring 的执行效果就像两个参数调换了一样
*/
//截取字符串
var str = "Mozilla";
console.log(str.substring(-2)) //Mozilla
console.log(str.substring(-2,4)) //Mozil
console.log(str.substring(3,NaN)); //Mozi
console.log(str.substring(5,2)); //zill
console.log(str.substring(-5,9)); //Mozilla
- slice() 方法提取某个字符串的一部分，并返回一个新的字符串，且不会改动原字符串。
-
slice(n，m)从索引n开始，截取到索引m处，不包含m，负数会看作strLength - m
-
console.log("" === "".slice(0,-1)) //true
/**slice() 方法提取某个字符串的一部分，并返回一个新的字符串，且不会改动原字符串。
* 原始数组不会被改变。
* 返回：从原字符串中提取出来的新字符串
* 语法：str.slice(beginIndex[, endIndex])
* 参数说明：
* beginIndex:
* 从该索引（以 0 为基数）处开始提取原字符串中的字符。
* 如果值为负数，会被当做 strLength + beginIndex 看待，
* 这里的 strLength 是字符串的长度（例如，如果 beginIndex 是 -3 则看作是：strLength - 3）
* endIndex 可选:
* 在该索引（以 0 为基数）处结束提取字符串。
* 如果省略该参数，slice() 会一直提取到字符串末尾。
* 如果该参数为负数，则被看作是 strLength + endIndex，
* 这里的 strLength 就是字符串的长度 (例如，如果 endIndex 是 -3，则是，strLength - 3)。
* str.slice(1, 4) 提取第二个字符到第四个字符（被提取字符的索引值（index）依次为 1、2，和 3）
* str.slice(2, -1) 提取第三个字符到倒数第一个字符
*/
//截取创建一个新字符串
var str1 = 'The morning is upon us.',
str2 = str1.slice(1, 8),
str3 = str1.slice(4, -2),
str4 = str1.slice(12),
str5 = str1.slice(23);
console.log(str2) //he morni
console.log(str3) //morning is upon u
console.log(str4) // is upon us.
console.log(str5) //""
替换 replace()
- replace() 方法返回一个由替换值（replacement）替换部分或所有的模式（pattern）匹配项后的新字符串，原字符串不会改变。
/**replace() 方法返回一个由替换值（replacement）替换部分或所有的模式（pattern）匹配项后的新字符串，原字符串不会改变。
* 模式可以是一个字符串或者一个正则表达式，
* 替换值可以是一个字符串或者一个每次匹配都要调用的回调函数。
* 如果pattern是字符串，则仅替换第一个匹配项。
* 返回：部分或全部匹配由替代模式所取代的新的字符串
* 语法：str.replace(regexp|substr, newSubStr|function)
* 参数说明：
* regexp (pattern)：
* 一个 RegExp 对象或者其字面量。该正则所匹配的内容会被第二个参数的返回值替换掉。
* substr (pattern)：
* 一个将被 newSubStr 替换的 字符串。其被视为一整个字符串，而不是一个正则表达式。仅第一个匹配项会被替换。
* newSubStr (replacement)：
* 用于替换掉第一个参数在原字符串中的匹配部分的字符串。该字符串中可以内插一些特殊的变量名。参考下面的使用字符串作为参数。
* function (replacement)：
* 一个用来创建新子字符串的函数，该函数的返回值将替换掉第一个参数匹配到的结果。参考下面的指定一个函数作为参数。
*/
//替换字符串的一部分
var name = "James Holiday"
console.log(name)
console.log(name.replace("Holiday","Home"))
//函数作为参数
let url_1 = "https://www.et.com?list=10&name=James&sepcial=Joker#heading-18";
let url_2 = "https://www.et.com#heading-18?list=10&name=James&sepcial=Joker";
let url_3 = "https://www.et.com?list=10&name=James&sepcial=Joker";
let url_4 = "https://www.et.com/#heading-18";
let url_5 = "https://www.et.com/";
/* 需求目标：第一个参数，传入url转化为普通对象；第二个参数，获取指定某个key的value */
function queryURLParams(url, arg) {
let result = {};
if(url){
url.replace(/#([^?=#&]+)/g, (_,hash) => result["hash"] = hash);
url.replace(/([^?=#&]+)=([^?=#&]+)/g, (_,key,value)=> result[key] = value);
} // else none
return !!arg ? result[arg] : result;
}
console.log(queryURLParams(url_1)); //{list: "10", name: "James", sepcial: "Joker", hash: "heading-18"}
console.log(queryURLParams(url_2)); //{hash: "heading-18?list=10&name=James&sepcial=Joker"}
console.log(queryURLParams(url_3)); //{list: "10", name: "James", sepcial: "Joker"}
console.log(queryURLParams(url_4)); //{hash: "heading-18"}
console.log(queryURLParams(url_5)); //{}
console.log(queryURLParams()); //{}
console.log(queryURLParams(url_1, "sepcial")); //Joker
分割 split()
- split() 方法使用指定的分隔符字符串将一个String对象分割成子字符串数组
/**split() 方法使用指定的分隔符字符串将一个String对象分割成子字符串数组
* 返回：分隔后组成的数组
* 语法：str.split([separator[, limit]])
* 参数说明：
* separator：分隔符，如果省略则不分割，并将整个字符串放入数组
* limit：返回的分割片段数量，且新数组中不返回剩下的文本。
*/
//分割字符
var str = "How you doing";
console.log(str.split(" ",2)) //(2) ['How', 'you']
console.log(str.split("")) //(13) ['H', 'o', 'w', ' ', 'y', 'o', 'u', ' ', 'd', 'o', 'i', 'n', 'g']
console.log(str.split()) //['How you doing']
console.log(str.split("o")) //(4) ['H', 'w y', 'u d', 'ing']
索引 indexOf() lastIndexOf()
- indexOf() 检索字符串，返回第一次出现位置的索引，如果没有这个字符，返回-1
/**indexOf() 检索字符串
* 返回：子字符串第一次出现的索引，如果没有这个字符，返回索引-1
* 语法：indexOf(searchString)
* indexOf(searchString, position)
* 参数说明：
* searchValue
* 检索参数会强制转换为字符串
* 如果不带参数调用方法，searchString 将被强制转换为 "undefined"
* position 可选
该方法返回指定子字符串在大于或等于 position 位置的第一次出现的索引，默认为 0
如果 position 大于调用字符串的长度，则该方法根本不搜索调用字符串
如果 position 小于零，该方法的行为就像 position 为 0 时一样。
hello world hello'.indexOf('o', -5) 返回 4——因为它使该方法的行为类似于第二个参数为 0，并且 o 在大于或等于 0 位置的第一次出现是在 4 位置。
hello world hello'.indexOf('world', 12) 返回 -1——因为，虽然子字符串 world 确实出现在索引 6 处，但该位置不大于或等于 12。
hello world hello'.indexOf('o', 99) 返回 -1——因为 99 大于 hello world hello 的长度，这会导致方法根本不搜索字符串。
*/
var str = "How you doing 007"
//检索参数会强制转换为字符串
console.log(str.indexOf(7)) //16
console.log(str.indexOf(007)) //16
//不带检索参数，str会被强治转换为"undefined"
console.log(str.indexOf()) //-1 --> 此时相当于是"undefined".indexOf("undefined")
console.log("undefined".indexOf("undefined")) //0
//指定检索开始位置
console.log(str.indexOf("o")) //1 默认从0开始
console.log(str.indexOf("o",2)) //5 从索引2开始
console.log(str.indexOf("o",-9)) //1 如果position小于0，从索引0开始
console.log(str.indexOf("o",29)) //-1 超出字符串长度，搜不到字符
console.log(str.indexOf("doing")) //8 子字符串的第一个字符的索引
- lastIndexOf() 从后往前检索，返回最后一次出现的索引，没找到返回 -1
/**lastIndexOf() 从后往前检索
* 返回：最后一次出现的索引，没找到返回 -1
* 语法：str.lastIndexOf(searchValue[, fromIndex])
* 参数说明：
* searchValue:
* 被查找的子串，如果searchValue是空字符串，则返回 fromIndex
* fromIndex 可选:
* 从 fromIndex 出往前搜索
缺省默认，返回字符串长度
如果 fromIndex >= str.length ，则会搜索整个字符串
如果 fromIndex < 0 ，则等同于 fromIndex == 0
*
*/
var str = "How you doing";
console.log(str.length) //13
console.log(str.lastIndexOf("")) //13
console.log(str.lastIndexOf("o")) //9
console.log(str.lastIndexOf("o",5)) //5
console.log(str.lastIndexOf("o",-5)) //-1 --> 相当于从字符串最开头的地方往前查找，此时自然搜索不到
console.log(str.lastIndexOf("o",15)) //9
链接 concat() +
- concat() 方法将一个或多个字符串与原字符串连接合并，形成一个新的字符串并返回
/**concat() 方法将一个或多个字符串与原字符串连接合并，形成一个新的字符串并返回
* 返回：一个新的字符串，包含参数所提供的连接字符串；不影响原字符串
* 语法：str.concat(str2, [, ...strN])
* 建议：使用赋值操作符 + += 代替 concat 方法
*/
var str1 = "how ", str2 = "you ", str3 = "doing";
console.log(str1.concat(str2)) //how you
console.log(str1.concat(str2,str3)) //how you doing
console.log(str1 += (str2 + str3)) //how you doing
去空格 trimStart() trimEnd() trimRight() trimLeft()
- trimStart()/trimLeft() 移除原字符串左端的连续空白符并返回一个新字符串，并不会直接修改原字符串本身
/**trimStart() 移除原字符串左端的连续空白符并返回一个新字符串，并不会直接修改原字符串本身，同trimLeft()
* 返回：一个新字符串，表示从其开头（左端）除去空格的调用字符串
* 语法：str.trimStart();
* str.trimLeft();
*/
var str1 = "fun"
var str2 = " ction"
console.log(str1 + str2.trimStart("ction")) //function
- trimEnd()/trimRight() 从一个字符串的末端移除空白字符
/**trimEnd() 方法从一个字符串的末端移除空白字符。trimRight() 是这个方法的别名。
* 返回：新字符串，从调用字串的末（右）端除去空白，不会修改原字符串
* 语法：str.trimEnd();
* str.trimRight();
*/
var str1 = "Hello "
var str2 = "world"
console.log(str1+str2) //Hello world
console.log(str1.trimEnd()+str2) //Helloworld
重复 repeat() - ES6
- repeat() 构造并返回一个新字符串，该字符串包含被连接在一起的指定数量的字符串的副本
/**repeat() 构造并返回一个新字符串，该字符串包含被连接在一起的指定数量的字符串的副本
* 返回：包含指定字符串的指定数量副本的新字符串
* 语法：str.repeat(count)
* 参数说明：
* count：
* 介于 0 和 +Infinity 之间的整数，表示在新构造的字符串中重复了多少遍原字符串
* 重复次数不能为负数，且必须小于 infinity，长度不会大于最长的字符串
*/
var str = "TIME ";
console.log(str.length)
console.log(str.repeat()) //(输出为空)
console.log(str.repeat(2)) //TIME TIME
console.log(str.repeat(5)) //TIME TIME TIME TIME TIME
console.log(str.repeat(6)) //TIME TIME TIME TIME TIME TIME
// console.log(str.repeat(-5)) //Uncaught RangeError: Invalid count value: -5
console.log(str.repeat(1.5)) //TIME
包含 includes() startsWith() endsWith() - ES6
- includes() 判断一个字符串是否包含在另一个字符串中，根据情况返回 true 或 false
/**includes() 判断一个字符串是否包含在另一个字符串中，根据情况返回 true 或 false。
* 返回：true/false
* 语法：str.includes(searchString[, position])
* 参数说明：
* searchString：
* 要在此字符串中搜索的字符串，大小写严格
* position 可选：
* 从当前字符串的哪个索引位置开始搜寻子字符串，默认值为 0
*/
var str = 'To be, or not to be, that is the question.';
console.log(str.includes("be")) //true
console.log(str.includes("be",6)) //true
console.log(str.includes("e",40)) //false
console.log(str.includes("e",NaN)) //true
console.log(str.includes("e","p")) //true
- startsWith() 方法用来判断当前字符串是否以另外一个给定的子字符串开头，并根据判断结果返回
true或false。
/**startsWith() 判断当前字符串是否以另外一个给定的子字符串开头
* 返回：根据判断结果返回 true 或 false
* 语法：str.startsWith(searchString[, position])
* 参数说明：
* searchString：
* 要搜索的子字符串
* position 可选：
* 在 str 中搜索 searchString 的开始位置，默认值为 0
*/
var str = "how do you do";
console.log(str.startsWith("how")) //true
console.log(str.startsWith("how",1)) //false
console.log(str.startsWith("do")) //false
console.log(str.startsWith("do",4)) //true
console.log(str.startsWith("do",11)) //true
- endsWith() 判断当前字符串是否是以另外一个给定的子字符串“结尾”的
/**endsWith() 判断当前字符串是否是以另外一个给定的子字符串“结尾”的
* 返回：根据判断结果返回 true 或 false
* 语法：str.endsWith(searchString[, length])
* 参数说明：
* searchString：
* 要搜索的子字符串
* length 可选：
* 作为 str 的长度。默认值为 str.length，相当于在原本字符串的多长之处，进行搜索
*/
var str = "To be, or not to be, that is the question";
console.log(str.endsWith("pop")) //false
console.log(str.endsWith("question")) //true
console.log(str.endsWith("to be")) //false --> 在末尾没有to be
console.log(str.endsWith("to be",19)) //true --> 在字符串开始19个字符的地方是以 to be 结尾的
正则匹配 search() match()
search()方法执行正则表达式和 String 对象之间的一个搜索匹配- 如果想知道字符串中是否存在某个模式（pattern）时可使用
search()，类似于正则表达式的 test() 方法 - 如果要了解更多匹配信息，可使用
match()（但会更慢一些），该方法类似于正则表达式的 exec() 方法
/**String.prototype.search()
* 语法：
* str.search(regexp)
* 返回：
* 匹配成功，则 search() 返回正则表达式在字符串中首次匹配项的索引;
* 否则，返回 -1
* 参说说明：
* regexp
* 一个正则表达式（regular expression）对象。
* 如果传入一个非正则表达式对象 regexp，
* 则会使用 new RegExp(regexp) 隐式地将其转换为正则表达式对象。
*/
var str = "hey Judy";
var reg1 = /[A-Z]/g;
var reg2 = /[.]/g;
console.log(str.search(reg1)) //4
console.log(str.search(reg2)) //-1
console.log(str.search("y")) //2
console.log(str.search("Judy?")) //4
- match() 方法检索返回一个字符串匹配正则表达式的结果
/**String.prototype.match()
* 语法：
* str.match(regexp)
* 返回：
* 使用 g ，返回字符串，由正则匹配结果组成。
* 未使用 g ，返回与 RegExp.exec() 相同的结果，
* 仅返回第一个完整匹配及捕获组，包括：groups index input
* groups: 一个命名捕获组对象，其键是捕获组名称，值是捕获组，如果未定义命名捕获组，则为 undefined
* index: 匹配的结果的开始位置
* input: 搜索的字符串
* 参说说明：
* regexp
* 一个正则表达式对象。
* 非正则对象，会隐式地使用 new RegExp(obj) 将其转换为一个 RegExp 。
* 如果没有任何参数，返回包含空字符串的 Array ：[""]
*/
var str = 'More information';
var reg1 = /or/ig;
var reg2 = /or/i;
var reg3 = /take/ig;
var found1 = str.match(reg1);
var found2 = str.match(reg2);
var found3 = str.match(reg3);
var found4 = str.match();
console.log(found1); //["or", "or"]
console.log(found2);
/**输出结果：
* ["or", index: 1, input: "More information", groups: undefined]
* 0: "or"
* groups: undefined
* index: 1
* input: "More information"
* length: 1
*/
console.log(found3); //null
console.log(found4);
/**输出结果：
* ["", index: 0, input: "More information", groups: undefined]
0: ""
groups: undefined
index: 0
input: "More information"
length: 1
*/
json 字符串
- 主要用于前后端交互的时候，保证前端js能够解析后面传过来的字符串，因为后面有可能是各种语言，如果不保证格式的统一，前端难以保证正确解析，json相当于作为一个Translater的角色
- json字符串的格式要求严格，key都需要加上引号，value根据需要正确书写即可，例如，
'{"name":"James","age":30}' - 两个重要方法
JSON.parse("str")JSON.stringify(Object)
//前端接受后端的数据 -->JSON.parse(str) 把后端的字符串转换为前端使用
var fromBehind = '{"name":"James","age":30}'
var strToObj = JSON.parse(fromBehind)
console.log(strToObj) //输出为对象： {name: 'James', age: 30}
//前端发送数据给后端 -->JSON.stringify()
var fromInfront = {"name":"James","age":30}
var objToStr = JSON.stringify(fromInfront)
console.log(objToStr) //输出为字符串：{"name":"James","age":30}
模板字符串 - ES6
- 模板字面量是字符串字面量，可以使用多行字符串和字符串插值功能
- 模板字符串使用 `反引号` 来代替普通字符串中的用双引号和单引号
- 模板字符串可以包含特定语法 `${expression}` 的占位符。占位符中的表达式和周围的文本会一起传递给一个默认函数，该函数负责将所有的部分连接起来，如果一个模板字符串由表达式开头，则该字符串被称为带标签的模板字符串，该表达式通常是一个函数，它会在模板字符串处理后被调用，在输出最终结果前，你都可以通过该函数来对模板字符串进行操作处理。
- 在模版字符串内使用反引号时，需要在它前面加转义符 `\``
练习示例
模糊查询
var arr = ["aaa","aab","abb","bbc","abc"]
var inputValue = prompt("Input",)
//示例 - filter() includes()模糊查询
var result1 = arr.filter(element => {
return element.includes(inputValue)
})
confirm("dilter+includes - 查询结果："+result1)
//示例 - filter() indexOf()模糊查询
confirm("filter+indexOf - 查询结果："+arr.filter(element => element.indexOf(inputValue)>-1))
