web学习笔记9 - 字符串

字符串 学习总结
封面画师：唏嘘的星辰 p站ID：13312138

创建字符串字面量创建

"" 不能嵌入双引号，可以嵌入单引号 可以\n进行换行
'' 不能嵌入单引号，可以嵌入双引号 可以\n进行换行
` ` es6字符串模板 可以支持换行
显示特殊符号，需要使用\进行转义
var s1 = 'how\'re you ? \n张三'
console.log(s1)

创建字符串对象方式

var s2 = new String('蕾姆')
console.log(s2)

字符串创建基本数据类型

var s3 = String('蕾姆酱天下第一')
console.log(s3)

字符串拼接concat() 拼接

var str1 = "hello"
var str2 = "world"
var str3 = "!"
console.log(str1+str2+str3)
console.log(`${str1}${str2}${str3}`)
console.log(str1.concat(str2,str3))

console.log(str1.length) //字符串长度
console.log(str1[0]) //通过索引值取

for循环遍历

for(var i = 0;i<str1.length;i++){
  var char = str1[i]
  console.log(char)
}
// es6专门提供一个遍历数组的方式 for...of...
for (const iterator of str1) {
  console.log(iterator)
}

字符串转成数字的方式

var str4 = "10px"   // 10*1
console.log(str4*1) //NAN
//parseFloat前提以数字开头的字符串，可以转成数字
console.log(parseFloat(str4)) //10 

var a = 10.535
console.log(a.toFixed(2)) // 数字对象toFixed(2) 保留小数

.trim()

去掉头部和尾部的空格符号
var str5 = d1.textContent.trim()

封装函数

根据传入字符，从指定字符串选取出来，加以显示高亮
c 代表是高亮的字符
all 代表整个字符

未封装函数

var htmlStr = ''
for(var i = 0;i<str5.length;i++){
    if(str5[i]=="逮"){
        // 把了替换成span
        htmlStr += `<span style='background-color:red'>${str5[i]}</span>`
    }else{
        // 把不相等也得拼接上
        htmlStr+=str5[i]
    }
}
d1.innerHTML = htmlStr

封装函数

var htmlStr = ''
// 封装函数：先考虑要不要传参, 在考虑函数要不要有返回值
function getStr(c,all){
  for(var i = 0;i<all.length;i++){
  if(all[i]==c){
    // 把了替换成span
    htmlStr += `<span style='background-color:red'>${all[i]}</span>`
  }else{
    // 把不相等也得拼接上
    htmlStr+=all[i]
  }
  }
}
getStr('男',str5)
d1.innerHTML = htmlStr

大小写转换

var s1 = "abcdEFG"
console.log(s1.toLocaleUpperCase()) //  转成大写的
console.log(s1.toLocaleLowerCase())//   转成小写的

字母与ASCII的转换

var s2 ="abc"
console.log(s2.charAt(0)) // a 索引值所对应的字符
console.log(s2.charCodeAt(0))//97 索引值所对应的字符的ASCII码
console.log("Z".charCodeAt(0)) // 65
var a = "9"
if(a.charCodeAt(0)>=65 && a.charCodeAt(0)<=90){
  console.log("大写字母")
}
console.log("0".charCodeAt(0))  //48
console.log("9".charCodeAt(0)) //57
console.log(String.fromCharCode(97)) //a  把ASCII转成对应字符

判断字符是否以…开头

var  s3 = "my heart will go on" // 
console.log(s3.startsWith('my')) //true
console.log(s3.endsWith('my'))  // 判断字符是否以...结尾 false
console.log(s3.startsWith('my heart will go on')) 
console.log(s3.endsWith('my heart will go on'))

indexOf 获取一个字符的下标 重点

var s4 = "abca"
console.log(s4.indexOf("a")) //0
console.log(s4.lastIndexOf("a"))//3

console.log("-".repeat(20)) // -重复20次

字符串替换

replace() 只替换一个
replaceAll() 替换所有的
如果一个方法调用完之后得到是一个字符串，还可以再次调用其他字符串API ,这样就形成一个链式调用

var s5 = "hello world"
console.log(s5.replace("l","L").replace("l","L"))
console.log(s5.replace("l",'<span>L</span>')) //把第二个字符串替换掉第一个字符，
console.log(s5.replace("l",'<span style="color:red">L</span>').replace("l",'<span style="color:red">L</span>'))
console.log(s5.replaceAll("l","L")) //替换全部

截取子字符串 （重点）

var s6 = "abcdefg"
console.log(s6.substring(1,3)) //从第一个开始 到第二个结束 bc
console.log(s6.substring(1))//截取到最后
console.log(s6.substr(1,3))//从索引值1开始 截取的长度为3位 bcd

去掉空格符号（了解）

var s7 = “ hello world “
console.log(s7.trim()) // 去掉前后空格
console.log(“ hello world “.trimStart()) //去掉开始空格
console.log(“ hello world “.trimRight())//去掉右边空格

字符串数组的转换（重点）

var s8 = "http：//1.jpg;http：//2.jpg;http：//3.jpg"
var arr = s8.split(";") //安装某个字符进行分割，不加参数把字符串每一个字符进行分割
// 带参数，把参数后面和前面分割成数组的元素
console.log(arr)
var s9 = "1234321"
var arr1 = s9.split("").reverse()
var s10 = arr1.join("") //数组转成字符串
if(s10==s9){
  console.log("是倒序数")
}

三元运算/三目运算

var b = 10 
var b1 = b>20?"成年":"未成年"  // 如果前面条件成立，结果为？后面的，如果不成立，结果为冒号后面
console.log(b1)

三个数取最大值

var b2 = 20
var b3 = 40
var b4 = 30
var max =  b2>b3?b2:b3 // max就是b2和b3最大值
max =  max>b4?max:b4 
var date=new Date().getDate()