day5JS-String常用方法和Math常用方法

1. 字符串常用方法

1.1 charAt()

通过索引下标去取值

javascript 复制代码
var str = 'chengxiaohui';
// 通过下标取值
var res = str.charAt(0);//"c"
// 如果找不到,返回值是空串
var res2 = str.charAt(12);//""
// 如果直接是索引去取值,找不到,返回是undefined
var res3 = str[12];//undefined

1.2 charCodeAt()

通过索引下标 取值对应的 ASCLL码值

javascript 复制代码
var str = 'chengxiaohui';
// 通过下标取值
var res = str.charCodeAt(0);//99   "c"==>ASCII码
console.log(res);//99

1.3 indexOf()/lastIndexOf()

第一个参数:查找的内容。

第二个参数:开始找的位置(indexOf)/找到哪终止(lastIndexOf)。

1.indexOf() : 一个参数的情况。

javascript 复制代码
var str = 'chengxiaohui';
// 一个参数,在整个字符串中找
var res = str.indexOf("x");
// 返回值是找到的下标
console.log(res);//5  

2.lastIndexOf() : 一个参数的情况。

javascript 复制代码
var str = 'chengxiaohui';
// 一个参数,在整个字符串中找最后一次出现的下标
var res = str.lastIndexOf("h");
// 返回值是找到的下标
console.log(res);//9 
  1. indexOf(): 两个参数的情况。
javascript 复制代码
var str = 'chengxiaohui';
// 从下标5开始找,找"h"
var res = str.indexOf("h",5);
// 返回值是找到的下标
console.log(res);//9 

4.lastIndexOf() : 两个参数的情况。

javascript 复制代码
var str = 'chengxiaohui';
// 截止到下标5,找"h"
var res = str.lastIndexOf("h",5);
// 返回值是找到的下标
console.log(res);//1  

1.4 slice()截取(包前不包后)

作用:查找字符串中特定位置的字符。

参数:2个参数(n,m)。 n:起始索引(包含), m结束索引(不包含)。

返回值:查找的字符。

  • 开始索引n(包括) 开始查找**到结束索引m(不包含)**之间的字符。

  • 如果结束索引m不写 ,就是查找到最后

  • 如果开始索引n只写一个0 ,或者不写 就是复制一份

  • 索引下标 也可以为负数方向是从右向左。转换成正数的规律:str.length+负的索引值。

javascript 复制代码
var str="zhufengpeixun"

str.slice(1,3)    ===>"hu"

str.slice(0)      ===>复制一份
str.slice()       ===>复制一份 


var res=str.slice(-3,-1);   ===>"xu" 

1.5 substring(n,m)

subString 和 slice 基本都一样,唯一不同在于,subString 不支持负数索引,而slice支持负数索引。

1.6 substr(n,m)截取(包前不包后)

  • 作用:从索引n开始截取到m个字符。

  • 参数:n,m(个数)。可以取负值索引 。方向是从左向右

  • 返回值:截取的字符串。

javascript 复制代码
var str="zhufengu";
var res=str.substr(-3,2);  ====>"ng"

1.7 toUpperCase()/ toLowerCase()

toUpperCase();-->把字符串转换为大写

toLowerCase(); -->把字符串转换为小写

1.8 replace()替换

  • 作用:把字符串某部分的字符替换成另一部分字符默认替换第一个

  • 参数:(str1,str2)第一个参数代表的是要替换的字符 或者是正则;第二个参数代表的是替换后的字符想要替换多个,必须使用正则表达式

  • 返回值:替换后的字符串。

javascript 复制代码
var str="zhu2018zhu2019zhu";

var res=str.replace("zhu","珠");   
//===>"珠2018zhu2019zhu"

var res=str.replace(/zhu/g,"珠");

console.log(res)===>"珠2018珠2019珠"

1.9 split()分割

  • 作用:按照指定的分割字符字符串 分割成数组

  • 参数:分割符

  • 返回值:分割后的数组

split 和 join 对比记忆

javascript 复制代码
 var str="1-2-3";

 var res=str.split("-");
 
 console.log(res); ===>  ["1", "2", "3"]

1.10 练习题

1.【时间字符串处理】把下面的字符串变成 "2019年08月18日 12时32分18秒"

javascript 复制代码
var str="2019-8-18 12:32:18";
//var res=str.split(/-| |:/g)

var time=str.split(" ");
console.log(time) //["2019-8-18", "12:32:18"]
var timeLeft=time[0];
var timeRight=time[1];
var ary1=timeLeft.split("-"); // ["2019", "8", "18"]
var ary2=timeRight.split(":");// ["12", "32", "18"]

var result=ary1[0]+"年"+ary1[1]+"月"+ary1[2]+"日"+" "+ary2[0]+"时"+ary2[1]+"分"+ary2[2]+"秒" 
console.log(result) //"2019年8月18日 12时32分18秒"

/* 
  补零
*/


function zero(num){
    return num<10?"0"+num:num;
}
var ss=zero(11);

var result=zero(ary1[0])+"年"+zero(ary1[1])+"月"+zero(ary1[2])+"日"+" "+zero(ary2[0])+"时"+zero(ary2[1])+"分"+zero(ary2[2])+"秒" 

//"2019年08月18日 12时32分18秒"

2. ueryURLParams 问号参数处理。

javascript 复制代码
 /* 
        var  str ="https://www.baidu.com?name=zhufeng&age=10&id=14";
        {
            name:"zhufeng",
            age:10,
            id:14
        }
       */


      function urlParams(str){
          var obj={};
          var paramsStr=str.split("?")[1];
          if(paramsStr){
              //[name=zhufeng,age=10,id=14]
              var paramsAry=paramsStr.split("&");
              for(var i=0;i<paramsAry.length;i++){
                    //name=zhufeng
                   var item=paramsAry[i];
                   //[name,zhufeng]
                   var itemAry=item.split("=");
                   obj[itemAry[0]]=itemAry[1];
              }
          }
          return obj;
      }
      var  str ="https://www.baidu.com?name=zhufeng&age=10&id=14";
      var result= urlParams(str);

2. Math常用的方法

Math 称之为数学函数,它也是对象类型数据 ,主要是用来操作数字的。

2.1 Math.abs() 求绝对值

javascript 复制代码
Math.abs(-1)

2.2 Math.ceil() 向上取整

向上取整 ,无论是正数还是负数 ,都取最大的值

javascript 复制代码
Math.ceil(1.2)//2

Math.ceil(-1.6)//-1

2.3 Math.floor()向下取整

向下取整 ,无论是正数还是负数 ,都取最小的值

javascript 复制代码
Math.floor(1.8)//1

Math.floor(-1.1)//-2

2.4 Math.round() 四舍五入

正数的话,还是正常的,之前理解的,但是如果是负数临界点 必须大于5

javascript 复制代码
Math.round(1.5)//2

Math.round(-1.5)//-1

Math.round(-1.51)//-2

2.5 Math.sqrt() 开平方

javascript 复制代码
Math.sqrt(9)//3

2.6 Math.pow(n,m) 取幂

n的m次幂

javascript 复制代码
Math.pow(3,2)   ==> 9

2.7 Math.PI

javascript 复制代码
Math.PI  ===>3.141592653589793

2.8 Math.max/Math.min 获取最大值和最小值

javascript 复制代码
Math.max(1,2,3);//3

Math.min(4,5,6);//4

2.9 Math.random() 获取0~1 之间的随机数(大于等于0,小于1)

获取n 到m 之间的随机数Math.random()*(m-n)+n;

案例:获取10 到20 之间的随机数

javascript 复制代码
Math.random()*10+10

升级版2\]:如果传的实参中包含字符串,就变成数字,如果是非有效数字,就直接略过 ```javascript function fn(){ var total=null; for(var i=0;i

javascript 复制代码
function fn(...arg){
  return eval(arg.filter((item)=>!isNaN(item)).join("+")) 
}
var res=fn(1,2,3,"3","3px");
相关推荐
华科云商xiao徐4 分钟前
高性能小型爬虫语言与代码示例
前端·爬虫
十盒半价4 分钟前
深入理解 React useEffect:从基础到实战的全攻略
前端·react.js·trae
攀登的牵牛花5 分钟前
Electron+Vue+Python全栈项目打包实战指南
前端·electron·全栈
iccb10136 分钟前
我是如何实现在线客服系统的极致稳定性与安全性的
前端·javascript·后端
一大树6 分钟前
Vue3祖孙组件通信方法总结
前端·vue.js
不要进入那温驯的良夜8 分钟前
跨平台UI自动化-Appium
前端
海底火旺8 分钟前
以一个简单的React应用理解数据绑定的重要性
前端·css·react.js
不要进入那温驯的良夜9 分钟前
浏览器技术原理
前端
在泡泡里9 分钟前
前端 mcp 的使用
前端
爱学习的茄子10 分钟前
React Hooks驱动的Todo应用:现代函数式组件开发实践与组件化架构深度解析
前端·react.js·面试