day07JavaScript基础知识：时间对象、Moment、字符串对象

最新推荐文章于 2023-05-31 15:02:12 发布

WEB-

最新推荐文章于 2023-05-31 15:02:12 发布

阅读量1.1k

点赞数

文章标签： js javascript 前端大前端

本文链接：https://blog.csdn.net/weixin_45637649/article/details/112692027

版权

本文详细介绍了JavaScript中的时间对象及其操作，包括创建当前时间、格式化时间、获取单个时间点以及使用Moment.js库进行更复杂的日期处理。同时，文章还探讨了字符串对象的创建、属性、方法，如length、charAt、indexOf等，以及如何进行字符串比较、替换、分割和拼接等操作。

摘要由CSDN通过智能技术生成

时间对象

对象的分类

原生对象: String Number Boolean Object Array Function Date RegExp Error
宿主对象: DOM BOM
内置对象：Global(全局 window, document) Math
全局对象: window

创建时间

创建当前时间

var date = new Date();
console.log(date);
console.log(typeof date); // object

获取其他格式的时间

// 获取其他格式的时间
console.log(date.toString());
console.log(typeof date.toString()); // string

console.log(date.toLocaleString()); // 2021/1/12 上午9:59:32
console.log(date.toLocaleDateString()); // 2021/1/12
console.log(date.toLocaleTimeString()); // 上午10:00:17

获取单个时间

console.log(date.getFullYear()); // 年 2021
console.log(date.getMonth()); // 月 数字  0-11 表示 1-12   0表示1月 11表示12月
console.log(date.getDate()); // 日 12
console.log(date.getDay()); // 星期  数字 0--6 表示周日--周六 0表示周日 1表示周一
var week = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
var n = date.getDay();
console.log(week[n]); // 周二

console.log(date.getHours()); // 小时
console.log(date.getMinutes()); // 分钟
console.log(date.getSeconds()); // 秒

// 毫秒数  时间戳  1970-1-1至今的数字
console.log(date.getTime()); // 毫秒数

Moment

了解

JavaScript 日期处理类库

下载地址

http://momentjs.cn/

moment.js: 未压缩学习

moment.min.js: 压缩开发

创建时间

// 创建时间
var date = moment(); // 创建的是当前时间
console.log(date); // 对象 时间对象

var date = moment('2021-02-05 00:00:00'); // 要加前导0  不加0会报警告
var date = moment('2000-01-01');
var date = moment({
    year: 2001,
    month: 2,  // 0-11 表示 1-12月
    day: 3,
    hour: 22,
    minute: 22,
    second: 22,
    milisecond: 789 // 毫秒数的最后3位
});

// format();
console.log(date.format('YYYY年MM月DD日 HH:mm:ss'));

格式化时间

// 创建时间
var date = moment('2021-02-05 12:01:30'); // 要加前导0  不加0会报警告

console.log(date.format('YYYY')); // 年
console.log(date.format('MM')); // 月  包含前导0  01--12
console.log(date.format('DD')); // 日 包含前导0 
console.log(date.format('d')); // 星期 0--6表示 周日到周六
console.log(date.format('HH')); // 小时
console.log(date.format('mm')); // 分钟
console.log(date.format('ss')); // 秒

console.log(date.format('X')); // 包含秒数的时间戳
console.log(date.valueOf()); // 毫秒数  时间戳
console.log(date.toDate()); // 转原生时间对象

获取和设置时间

var date = moment();

console.log(date.year());
date.year(2022);
// 时间.set(string, 数字);
date.set('year', 2021);
// 时间.set({string: 数字});
date.set({
    month: 2 // 2---3月  0--11表示1--12
});
console.log(date.format('YYYY-MM-DD HH:mm:ss'));

其他方法

console.log(date.year()); // 年
console.log(date.month()); // 月  0--11表示1--12月
console.log(date.date()); // 日期  一个月中的第几天
console.log(date.day()); // 星期
console.log(date.hour());// 小时
console.log(date.minute());// 分钟
console.log(date.second()); // 秒
console.log(date.millisecond()); // 毫秒

console.log(date.week()); // 一年的第几个星期
console.log(date.daysInMonth()); // 所在月份总共有多少天
console.log(date.dayOfYear()); // 一年中的第多少天
console.log(date.quarter()); // 一年的第几个季度

查询

isSame: 时间对象.isSame(时间对象, 层级)
isBefore: 时间对象1.isBefore(时间对象2, 层级)
isAfter: 时间对象1.isAfter(时间对象2, 层级)
时间对象1.isBetween(时间对象2, 时间对象3, 层级);

/*
    查询时间：
        判断一个时间是否在另一个时间之前或之后  或 某两个时间之间
*/
var date = moment(); // 当前时间
var end = moment('2020-12-01');
var fur = moment('2022-12-01');

/* 
    isSame: 时间对象.isSame(事件对象, 层级)
    返回一个布尔值 如果相同 返回true 如果不同 返回false
*/
console.log(date.isSame(end)); // false
date.year(2020);
console.log(date.format('YYYY-MM-DD'));

// 层级: 对比到哪一个层级 如果写year 表示只对比年份是否相同
// 如果写月份 表示 如果年份和月份相同  就是true
console.log(date.isSame(end, 'year')); // true
console.log(date.isSame(end, 'month')); // false

/* 
    isBefore: 时间对象1.isBefore(时间对象2, 层级)
    返回一个布尔值 如果时间对象1在时间对象2之前 返回true 如果不是 返回false
*/
console.log(date.format('YYYY-MM-DD'), end.format('YYYY-MM-DD'), fur.format('YYYY-MM-DD'));
console.log(date.isBefore(end)); // true
console.log(fur.isBefore(date)); // false

/* 
    isAfter: 时间对象1.isAfter(时间对象2, 层级)
    返回一个布尔值 如果时间对象1在时间对象2之后 返回true 如果不是 返回false
*/
console.log(date.isAfter(end)); // 2020-01-12  2020-12-01  false
console.log(fur.isAfter(date)); // 2022-12-01  2020-01-12  true

/* 
    isBetween: 
        时间对象1.isBetween(时间对象2, 时间对象3, 层级);
        返回布尔值
        如果时间对象1在时间对象2和事件对象3之间 返回true
        否则返回false
*/
console.log(date.isBetween(end, fur)); // 2020-01-12  2020-12-01  2022-12-01  false
console.log(end.isBetween(date, fur)); // 2020-12-01  2020-01-12  2022-12-01  true

字符串对象

概念

字符串: 成对的引号包裹的就是字符串

创建方式

字面量： var 变量 = ‘内容’;
强制转换： var 变量 = String(内容);
new关键: var 变量 = new String(‘内容’);

1.2 创建出来的是字符串string类型 3创建出来的是一个对象

var str = '123456a';
var str1 = String('123456a');
var str2 = new String('123456a');
console.log(str, str1, str2);
console.log(typeof str, typeof str1, typeof str2); // string string object

属性和方法

length

字符串的长度：字符串.length

console.log(str.length, str2.length); // 7 7

指定下标字符

字符串.charAt(下标)
字符串[下标]

// 指定下标的字符: 
// 1. 字符串.charAt(下标)
console.log(str.charAt(3));
// 2. 字符串[下标]
console.log(str[3]);

指定下标字符的编码

charCodeAt: 指定下标的字符的ASCII值

console.log(str.charCodeAt(3)); // 4的编码--52

字符串比较

从左往右依次比较每一个字符的ASCII码如果能比较出来大小返回结果

console.log('1' < '1'); // 49 < 49  false
console.log('100' > '1'); // 49 49  0 和 空  48 > 0 true
console.log('100000000' < '2'); // 49 < 50  true
console.log('a' > '0'); // 97 > 48  true

查找

indexOf

字符串.indexOf(查找的内容[, 起始下标])

从左往右查找要找的内容, 如果找到返回下标如果找不到返回-1

如果不传起始下标从下标为0的位置开始查找

如果传起始下标从起始下标位置开始查找

var str = 'abcdefghiabcdeabc';
console.log(str.indexOf('d')); // 3
console.log(str.indexOf('d', 4)); // 12

lastIndexOf

字符串.lastIndexOf(查找的内容[, 起始下标]);

从右往左查找要找的内容，如果找到返回下标如果找不到返回-1

如果不传起始下标从字符串的最后一位开始往前查找

如果传起始下标从起始下标的位置开始往前查找

console.log(str.lastIndexOf('d')); // 12
console.log(str.lastIndexOf('d', 11)); // 3
console.log(str.lastIndexOf('d', 0)); // -1

截取

substring

substring: 字符串.substring([起始下标[, 结束下标]])

传一个参数: 返回从起始下标开始到字符串结束为止的所有字符包含起始下标的字符

传两个参数: 返回从起始下标开始到结束下标为止的所有字符包含起始下标的字符不包含结束下标的字符

传两个参数, 起始下标小于结束下标: 互换位置, 然后再参考上述规则

传两个参数, 下标是负数: 将负数变成0, 然后将小的放在前面, 然后再参考上述规则

var str = 'abcdefghiabcdeabc';
console.log(str.substring()); // abcdefghiabcdeabc
console.log(str.substring(2)); // cdefghiabcdeabc
console.log(str.substring(2, 4)); // cd
console.log(str.substring(4, 2)); // cd
console.log(str.substring(4, -1)); // 0--4  abcd

slice

字符串.slice([起始下标[, 结束下标]])

不传参：返回整个字符串

传一个参数: 返回从起始下标开始到字符串结束为止的所有字符包含起始下标的字符

传两个参数: 返回从起始下标开始到结束下标为止的所有字符包含起始下标的字符不包含结束下标的字符

传两个参数, 起始下标大于结束下标: 返回空字符串

传两个参数, 结束下标是负数: 表示从右往左有几位字符不要

console.log(str.slice()); // abcdefghiabcdeabc
console.log(str.slice(2)); // cdefghiabcdeabc
console.log(str.slice(2, 4)); // cd
console.log(str.slice(4, 2)); // 
console.log(str.slice(2, -1)); // cdefghiabcdeab

substr

字符串.substr([起始下标[, 长度]]);

不传参：返回整个字符串

传一个参数: 返回从起始下标开始

传两个参数: 返回从起始下标开始

console.log(str.substr()); // abcdefghiabcdeabc
console.log(str.substr(2)); // cdefghiabcdeabc
console.log(str.substr(2, 5)); // 从下标2开始 截取5位   cdefg

转换大小写

toUpperCase

转大写: 字符串.toUpperCase(); 将字符串中所有的字母都转成大写并且返回

var str = 'width=device-width, initial-scale=1.0';

// 转大写: 字符串.toUpperCase();  将字符串中所有的字母都转成大写并且返回
console.log(str.toUpperCase());

toLowerCase

转小写: 字符串.toLowerCase(); 将字符串中所有的字母都转成小写并且返回

var str = '123QWERqwe';
console.log(str.toLowerCase()); // 123qwerqwe

去除左右空格

字符串.trim();

将字符串最左边和最右边的空格都去掉

var str = '     today is Tuesday, it is a fine day     ';
console.log('1', str, '1');
console.log('(' + str.trim() + ')');

替换

replace:

字符串.replace(替换的字符/正则, 新内容/函数);

一次只能替换一个位置

var str = 'abcdefabdefabcdef';
// abc--->***
console.log(str.replace('abc', '***'))

分割和拼接

split

split: 字符串的方法字符串.split([‘分割字符’[, 长度]])

返回一个数组分割字符可以是一切字符标签

不传参, 整个字符串返回成数组的一项

传空字符将每个字符都分割成数组的一项

不传长度: 分割出来有几项数组就保留几项

传长度: 只保留长度以内的项数传6 数组的长度就是6

var str = 'abcdefabcdefabcdef';
var arr = str.split('d');
console.log(arr);

var ul = document.getElementsByTagName('ul')[0];
var html = ul.innerHTML;
console.log(html);
var arr1 = html.split('<li>');
console.log(arr1);

console.log(str.split());
console.log(str.split(''));
console.log(str.split('', 6));

join

join: 数组的方法数组.join([‘拼接符’])

返回数组的每一项用拼接符拼起来的字符串

不传拼接符默认以,拼接

console.log(arr);
console.log(arr.join('-'));
console.log(arr.join());
console.log(arr.join(''));

console.log(arr1); // 用<p>
var str2 = arr1.join('<p>');
console.log(str2);
var arr2 = str2.split('</li>');
console.log(arr2);
// 使用p的结束标签拼接起来
var str3 = arr2.join('</p>');
console.log(str3);

ul.innerHTML = str3;