vue3 + ts 判断数据类型的各种方法集合
2023-12-13 12:33:11
vue3 + ts 判断数据类型的各种方法集合(记录ing…)
1. 直接上代码
1. 在utils文件夹下新建 `index.ts`
// index.ts
/**
* @description: 判断是否为某个类型
*/
export function is(val: unknown, type: string) {
return Object.prototype.toString.call(val) === `[object ${type}]`;
}
/**
* @description: 判断是否为函数
*/
export function isFunction<T = Function>(val: unknown): val is T {
return is(val, "Function");
}
/**
* @description: 判断是否已定义
*/
export const isDef = <T = unknown>(val?: T): val is T => {
return typeof val !== "undefined";
};
/**
* @description: 判断是否未定义
*/
export const isUnDef = <T = unknown>(val?: T): val is T => {
return !isDef(val);
};
/**
* @description: 判断是否为对象
*/
export const isObject = (val: any): val is Record<any, any> => {
return val !== null && is(val, "Object");
};
/**
* @description: 判断是否为时间
*/
export function isDate(val: unknown): val is Date {
return is(val, "Date");
}
/**
* @description: 判断是否为数值
*/
export function isNumber(val: unknown): val is number {
return is(val, "Number");
}
/**
* @description: 判断是否为字符串
*/
export function isString(val: unknown): val is string {
return is(val, "String");
}
/**
* @description: 判断是否为boolean类型
*/
export function isBoolean(val: unknown): val is boolean {
return is(val, "Boolean");
}
/**
* @description: 判断是否为数组
*/
export function isArray(val: any): val is Array<any> {
return val && Array.isArray(val);
}
/**
* @description: 判断是否客户端
*/
export const isClient = () => {
return typeof window !== "undefined";
};
/**
* @description: 判断是否为 null
*/
export function isNull(val: unknown): val is null {
return val === null;
}
/**
* @description: 判断是否为 null || undefined
*/
export function isNullOrUnDef(val: unknown): val is null | undefined {
return isUnDef(val) || isNull(val);
}
/**
* @description: 判断是否为 16 进制颜色
*/
export const isHexColor = (str: string) => {
return /^#?([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$/.test(str);
};
2. 简单使用
<template>
<div ref="warp" class="warp"></div>
</template>
<script setup lang="ts">
import {
is,
isFunction,
isDef,
isUnDef,
isObject,
isDate,
isNumber,
isString,
isBoolean,
isArray,
isClient,
isNull,
isNullOrUnDef,
isHexColor,
} from "@/utils/index";
import { nextTick, onMounted, ref } from "vue";
onMounted(() => {
// 判断值是否为某个类型
let a = "111",
b = 222,
c = true;
console.log(is(a, "String")); // true
console.log(is(b, "Number")); // true
console.log(is(c, "Boolean")); // true
// 是否为函数
let d = () => {
console.log("你好");
};
console.log(isFunction(d)); // true
console.log(isFunction(a)); // false
// 是否已定义
console.log(isDef(a)); // true
// 是否未定义
console.log(isUnDef(d)); // false
// 是否为对象
let e = { a: 1, b: 2 };
console.log(isObject(e)); // true
console.log(isObject(a)); // false
// 是否为时间
let f = new Date();
let g = "09:49:56";
console.log(isDate(f)); // true
console.log(isDate(g)); // false
// 是否为数值
let h = 123;
let i = "123";
console.log(isNumber(h)); // true
console.log(isNumber(i)); // false
// 是否为字符串
let k = "11111";
console.log(isString(k)); // true
console.log(isString(b)); // false
// 是否为boolean类型
let l = true;
console.log(isBoolean(l)); // true
console.log(isBoolean(k)); // false
// 是否为数组
let arr = [1, 2, 3];
console.log(isArray(arr)); // true
console.log(isArray(l)); // false
// 是否客户端
console.log(isClient()); // pc端显示true
// 是否为 null
console.log(isNull(null)); // true
console.log(isNull(undefined)); // false
console.log(isNull(a)); // false
// 是否为 null || undefined
console.log(isNullOrUnDef(null)); // true
console.log(isNullOrUnDef(undefined)); // true
console.log(isNullOrUnDef(a)); // false
// 是否为 16 进制颜色
console.log(isHexColor("#dddddd")); //true
console.log(isHexColor("rgb(0, 0, 0)")); //false
});
</script>
3. 暂时搞定!
文章来源:https://blog.csdn.net/weixin_45563734/article/details/134967747
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!