js实用方法-字符串与日期

Mr.wang

javascript

发布于：2020年5月20日

次浏览

记录开发中的字符串与日期处理的方法

技巧及有趣的方法

操作Date

检查日期是否有效

1 2	const isDateValid = (...val) => !Number.isNaN(new Date(...val).valueOf()); isDateValid("December 17, 1995 03:24:00"); // true

计算两个日期之间的间隔

1 2	const dayDif = (date1, date2) => Math.ceil(Math.abs(date1.getTime() - date2.getTime()) / 86400000) dayDif(new Date("2021-11-3"), new Date("2022-2-1")) // 90

距离过年还有90天~

查找日期位于一年中的第几天

1 2	const dayOfYear = (date) => Math.floor((date - new Date(date.getFullYear(), 0, 0)) / 1000 / 60 / 60 / 24); dayOfYear(new Date()); // 307

2021年已经过去300多天了~

时间格式化

时间转化为hour:minutes:seconds的格式

const timeFromDate = date => date.toTimeString().slice(0, 8);
    
timeFromDate(new Date(2021, 11, 2, 12, 30, 0));  // 12:30:00
timeFromDate(new Date()); // 返回当前时间 09:00:00

js判断

instanceof运算符用来判断一个构造函数的prototype属性所指向的对象是否存在另外一个要检测对象的原型链上

1 2	const Router = require('Koa-router') if(router instanceof Router) //判断router是否基于Router(在Router原型链上)

提供 function 给外部调用

window.init = function init(configs) {
  Vue.prototype.configs = configs;
  new Vue({
    render: (h) => h(App),
  }).$mount("#app");
};
init();
//调用这个html即可在window上获取这个函数且可以调用
//可用于原生安卓传递参数给Vue页面或控制Vue页面的渲染

调试骚技巧

//vue文件中，将this绑定在window对象上，浏览器控制台即可直接打印vue为当前this的实例，在哪个组件上定义就在哪个组件上的this实例，在main.js中则是初始实例new Vue()
mounted() {
    window.vue = this
  }
//在html文件中则是直接赋值
window.wang = "wang"
//我们在使用window.location.href切换链接，实则在调用浏览器的browser的api->浏览器对象模型

简化事件赋值写法

对于某些事件只需简单的赋值可不写 methods，多个赋值可使用逗号，

$event子组件返回数据使用$event

@click="id=item.id,display=true"
@input="time=$event"
data() {
   return {
       id:0,
       display:false
   }
}

时间戳转换

function format(timeStamp) {
  let time = new Date(timeStamp);
  return `${new Date().getFullYear()}-${
    new Date().getMonth() + 1
  }-${new Date().getDate()} ${new Date().getHours()}:${new Date().getMinutes()}:${new Date().getSeconds()}`;
}

常见new Date()

1	new Date().setTime(new Date().getTime() - 24 * 60 * 60 * 1000)//前一天时间

查询当前 localStorage 存储大小

(function () {
  if (!window.localStorage) {
    console.log("浏览器不支持localStorage");
  }
  var size = 0;
  for (item in window.localStorage) {
    if (window.localStorage.hasOwnProperty(item)) {
      size += window.localStorage.getItem(item).length;
    }
  }
  console.log("当前localStorage剩余容量为" + (size / 1024).toFixed(2) + "KB");
})();

什么是 IIFE (立即调用的函数表达式)

IIFE是一个立即调用的函数表达式，它在创建后立即执行

(function IIFE() {
  console.log("Hello!");
})();
// "Hello!"

点击回到顶部的 js

Gotop.onclick = function () {
  //判断是否有无定时器
  if (c) {
    clearInterval(c);
  }
  c = setInterval(function () {
    var target = 0; //顶部的距离
    var step = 10; //每次滚动的距离
    var curent = getScroll().scrollTop; //滚动出去的距离
    //判定有没有滚动
    if (curent > target) {
      step = -Math.abs(step);
    }

    //使页面开始一直往上滚
    curent += step;
    document.documentElement.scrollTop = curent;
    document.body.scrollTop = curent;
    //判断最后页面是不是到了最开始的位置
    if (Math.abs(curent) <= target) {
      clearInterval(c);
      document.documentElement.scrollTop = target;
      document.body.scrollTop = target;
      return;
    }
  }, 2);
};
// 获取页面滚动出去的距离，处理兼容性
function getScroll() {
  return {
    scrollTop: document.documentElement.scrollTop || document.body.scrollTop,
    scrpllLeft: document.documentElement.scrpllLeft || document.body.scrollLeft,
  };
}

生成随机字符串 (可指定长度)

/**
 * 生成随机字符串(可指定长度)
 * @param len
 * @returns {string}
 */
randomString = function(len) {
  len = len || 8;
  var $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678';
  /****默认去掉了容易混淆的字符oOLl,9gq,Vv,Uu,I1****/
  var maxPos = $chars.length;
  var pwd = '';
  for (var i = 0; i < len; i++) {
    pwd += $chars.charAt(Math.floor(Math.random() * maxPos));
  }
  return pwd;
}

生成随机颜色值

function getRandomColor () {
  const rgb = []
  for (let i = 0 ; i < 3; ++i){
    let color = Math.floor(Math.random() * 256).toString(16)
    color = color.length == 1 ? '0' + color : color
    rgb.push(color)
  }
  return '#' + rgb.join('')
}

city.json 城市 JSON 数据处理为级联组件适用的结构

Object.keys(City).forEach((city) => {
  if (City[city].level === 1) {
    let tempArr = [];
    City[city].children.map((v) => {
      tempArr.push({ id: City[v].id, name: City[v].name });
    });
    tempCity.push({
      id: City[city].id,
      name: City[city].name,
      children: tempArr,
    });
  }
});

计算指定数字的阶乘

利用递归调用来进行数字的阶乘

const factorialOfNumber = (number) =>
  number < 0
    ? (() => {
        throw new TypeError("请输入正整数");
      })()
    : number <= 1
    ? 1
    : number * factorialOfNumber(number - 1);
// 事例
factorialOfNumber(4); // 24
factorialOfNumber(8); // 40320

字符串反转

1 2	const reverseString = (string) => [...string].reverse().join(""); reverseString(121245); //=> 542121

测试`js`代码的执行耗时:`performance`：

let start = performance.now();
let sum = 0;
for (let i = 0; i < 100000; i++) {
  sum += 1;
}
let end = performance.now();
console.log(start);
console.log(end);

避免多条件并列

开发中有时会遇到多个条件，执行相同的语句，也就是多个||这种：

if(status==1||status==2||status==3){
    doSomeThing()
}


switch(status){
    case 1：
    case:2
    case:3:
      doSomeThing()
}

const enum = [1, 2, 3];
if (enum.includes(status)) {
  doSomething();
}

||和&&

1 2	let wang = type \|\| "wang"; //使用在方法内传递形参给予默认值 type && eval((wang = "wang")); //简单的if判断（短路运算）如果type为true 则执行&&后面的语句

注解：&&后的为 function（函数），可直接执行，但如果是一些 js 逻辑却不能执行，这时可以使用 eval（）欺诈

RGB 色值生成 16 进制色值

const rgb2Hex = rgb => {
    let rgbList = rgb.toString().match(/\d+/g)
    let hex = '#'
    for (let i = 0, len = rgbList.length; i < len; ++i) {
      hex += ('0' + Number(rgbList[i]).toString(16)).slice(-2)
    }
    return hex
};
rgb2Hex('100, 50, 0') // '#643200'

使用|处理小数

1
2
3

console.log(10.9 | 0); //->10
console.log(-10.9 | 0); //->-10
//小数点后面的都会切除

字符串转为对象取值（“obj.name”=>eval(obj.name)）
当使用某个变量作为对象的键值时，可用 obj.key
当变量为 name 作为键值时，可用以下方法

let obj = {}
let key = "name";
let val = "wang"
eval(`obj.${key} = '${val}'`)=>eval("obj.name = 'wang'")//=>obj = {name: "wang"}

操作字符串

获取两个整数之间的随机整数

1 2	const random = (min, max) => Math.floor(Math.random() * (max - min + 1) + min); random(1, 50);

将RGB转化为十六机制

1 2	const rgbToHex = (r, g, b) => "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1); rgbToHex(255, 255, 255); // '#ffffff'

获取随机十六进制颜色

1 2	const randomHex = () => `#${Math.floor(Math.random() * 0xffffff).toString(16).padEnd(6, "0")}`; randomHex();

获取变量的类型

const trueTypeOf = (obj) => Object.prototype.toString.call(obj).slice(8, -1).toLowerCase();

trueTypeOf('');     // string
trueTypeOf(0);      // number
trueTypeOf();       // undefined
trueTypeOf(null);   // null
trueTypeOf({});     // object
trueTypeOf([]);     // array
trueTypeOf(0);      // number
trueTypeOf(() => {});  // function

字符串首字母大写

1 2	const capitalize = str => str.charAt(0).toUpperCase() + str.slice(1) capitalize("hello world") // Hello world

翻转字符串

1 2	const reverse = str => str.split('').reverse().join(''); reverse('hello world'); // 'dlrow olleh'

随机字符串(nice)

tips:利用toString转换随机数但是有限制在数字类型会失精，最终生产的随机数只有大概13位左右（此方法含小数点在第二位）

1 2	const randomString = () => Math.random().toString(36).slice(2); randomString(); //'0.31ocjp24uy'

截断字符串为…

1
2

const truncateString = (string, length) => string.length < length ? string : `${string.slice(0, length - 3)}...`;
truncateString('Hi, I should be truncated because I am too loooong!', 36)   // 'Hi, I should be truncated because...'

生成固定字符指定次数的字符串（N 个”XXX”）

Array(10).join(1); //=>"1111111111"
Array(3).join("a"); //=>"aaa"
"1".repeat(3); //=> "111"
"abc".repeat(3); //=> "abcabcabc"

生成随机 0-N 的数组

时间 0 点到 23 点

1	[...new Array(24).keys()]; //=>[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23]

数字的修饰-每三位加一逗号

12000000.11 转化为 12,000,000.11

function commafy(num) {
  return (
    num &&
    num.toString().replace(/(\d)(?=(\d{3})+\.)/g, function ($1, $2) {
      return $2 + ",";
    })
  );
}

字符串扩展

1 2	let word = "wang"; let arr = [...word]; //=>["w","a","n","g"]

中英文判断字符串长度一致

let word = "w";
let chzn = "王";
console.log(word.length, chzn.length); // 1 2
let arr1 = [...word];
let arr2 = [...chzn];
console.log(arr1.length, arr2.length); // 1 1

字符串首字母大写

let word = "wang";

word = word[0].toUpperCase() + word.substr(1);

console.log(word); // "Wang"

字符串正则匹配切割

1
2
3

const surname = "wang,li;zhang";
const surnameArr = surname.split(/[,;]/);
console.log(surnameArr); // ["wang", "li", "zhang"]

转换字节单位KB MB GB

const formatbyte =  (value, type = 'GB') => {
  let k = 1024
  let val = Number(value)
  if (val == 0) return '0 B'
  else if (!value) return value
  let sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
  let unit = sizes.findIndex(i => i == type)
  if (unit) val = val * Math.pow(k, unit)
  let i = Math.floor(Math.log(val) / Math.log(k))
  return (val / Math.pow(k, i)).toPrecision(4) + '' + sizes[i]
}
formatbyte(10000) => '9.766TB'
formatbyte(0.22) => '225.3MB'

生成包含大小写字母和数字的随机字符串？

项目中，也许我们会遇到需要使用 JS 生成特定长度随机字符串的需求，比如用来做 Hash 值、uuid、随机码等，除了可以借助一些库和插件之外，其实部分场景下，我们完全可以自定义函数实现指定长度随机字符串的生成。

简洁版函数只需要两行代码：

/**
 * 生成长度为len的包含a-z、A-Z、0-9的随机字符串
 */
function generateStr(len = 18) {
  // 一行代码生成0-9、A-Z、a-z、总长度为62的字符数组
  var arr = [...new Array(62)].map((item, i) =>
    String.fromCharCode(i + (i < 10 ? 0 : i < 36 ? 7 : 13) + 48)
  );
  return [...new Array(len)]
    .map(() => arr[Math.floor(Math.random() * arr.length)])
    .join('');
}
generateStr(18);

如果担心重复，则可以添加一个Map来缓存已经生成的字符串，每次返回时判断一下：

/**
 * 生成长度为len的包含a-z、A-Z、0-9的随机字符串
 */
const cacheMap = new Map(); // 缓存已经生成过了的字符串
// 一行代码生成0-9、A-Z、a-z、总长度为62的字符数组
const arr = [...new Array(62)].map((item, i) =>
  String.fromCharCode(i + (i < 10 ? 0 : i < 36 ? 7 : 13) + 48)
);
function generateStr(len = 18) {
  const str = [...new Array(len)]
    .map(() => arr[Math.floor(Math.random() * arr.length)])
    .join('');
  if (cacheMap.has(str)) {
    // 这里会有死循环的问题，比如下面的for循环，i设置的大于62
    console.log(cacheMap, str);
    // i 值越大，len越小，重复的概率越大
    return generateStr(len);
  } else {
    cacheMap.set(str, true);
    return str;
  }
}
for (let i = 0; i < 20; i++) {
  // 长度选小一点，测试20次
  // i设置的大于62会出现死循环，可先算出排列组合数进行预防
  // i 值越大，len越小，重复的概率越大，执行时间越长
  generateStr(1);
}
console.log(cacheMap);

本页文档最后更新于：2022年3月3日

javascript

请注意前方有坑

js逻辑上小概率会出现反人类的逻辑火狐浏览器对于某些时间格式在new Date时会Invalid Date123new Date('2021/11/08 00:00:00&#...

js实用方法-对象与class

记录开发中的对象的方法 class 类方法的使用技巧及有趣的方法 for...in 语句以原始插入顺序迭代对象的可枚举属性。 for...of 语句遍历可迭代对象定义要迭代的数据。 ...

js实用方法-字符串与日期

技巧及有趣的方法

操作Date

检查日期是否有效

计算两个日期之间的间隔

查找日期位于一年中的第几天

时间格式化

时间转化为hour:minutes:seconds的格式

js判断

提供 function 给外部调用

调试骚技巧

简化事件赋值写法

时间戳转换

常见new Date()

查询当前 localStorage 存储大小

什么是 IIFE (立即调用的函数表达式)

点击回到顶部的 js

生成随机字符串 (可指定长度)

生成随机颜色值

city.json 城市 JSON 数据处理为级联组件适用的结构

计算指定数字的阶乘

字符串反转

测试js代码的执行耗时:performance：

避免多条件并列

||和&&

RGB 色值生成 16 进制色值

使用|处理小数

操作字符串

获取两个整数之间的随机整数

将RGB转化为十六机制

获取随机十六进制颜色

获取变量的类型

字符串首字母大写

翻转字符串

随机字符串(nice)

截断字符串为…

生成固定字符指定次数的字符串（N 个”XXX”）

生成随机 0-N 的数组

数字的修饰-每三位加一逗号

字符串扩展

中英文判断字符串长度一致

字符串首字母大写

字符串正则匹配切割

转换字节单位KB MB GB

生成包含大小写字母和数字的随机字符串？

测试`js`代码的执行耗时:`performance`：