前端JS必用工具【js-tool-big-box】,验证是否是Unicode字符,获取一个字符串的字节长度,以及新增发送JSONP跨域请求的方法

本文主要是介绍前端JS必用工具【js-tool-big-box】,验证是否是Unicode字符,获取一个字符串的字节长度,以及新增发送JSONP跨域请求的方法,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

js-tool-big-box,目前已经收集到了用户需求,希望可以添加一些公用方法,我觉得这很好,我们一起把这个前端通用工具做大一些,帮助更多的小伙伴少些util代码,更多的关注于自己的业务开发,真是不错。

目录

1 安装并引入

2  检测某个字符是不是Unicode字符

3  判断字符串的字节长度

4 发送JSONP跨域请求 


1 安装并引入

还是老样子,使用先安装,执行一下命令

npm i js-tool-big-box

这一小结,需要引入3个对外提供的对象,分别是ajaxBox stringBox 和 matchBox

import { matchBox, stringBox, ajaxBox } from 'js-tool-big-box';

2  检测某个字符是不是Unicode字符

比如我们需要输入一个字符,或者几个字符,不能输入太特殊的,但是一般的都可以输入。很简单,太特殊的展示起来会很麻烦嘛,对吧。但普通一些的,例如文字,字母,简单表情都是可以的。示例代码如下:

    const code1 = 'A';const code2 = '😶';const code3 = '🧚‍♂️';const code1Result = matchBox.checkUnicode(code1);const code2Result = matchBox.checkUnicode(code2);const code3Result = matchBox.checkUnicode(code3);console.log('A是不是一个Unicode character?', code1Result);console.log('😶是不是一个Unicode character?', code2Result);console.log('🧚‍♂️是不是一个Unicode character?', code3Result);

使用方法总结: 

方法名返回值入参
checkUnicodetrue或者false参数必填,需要判断的一个字符,如果需要多个可自行遍历字符串,或者后续提出需求,改进工具

3  判断字符串的字节长度

很多时候,一个字符串的length属性并不能得到字节长度,像汉字,表情啦,就不是所谓的长度了,所以这里需要一个字节长度的方法,示例代码如下:

    const str1 = 'Hello world!!!';const str2 = '我是The first one,😶 HaHa~';const str1ByteLength = stringBox.byteLength(str1);const str2ByteLength = stringBox.byteLength(str2);console.log('Hello world!!!的字节长度是:', str1ByteLength);console.log('我是The first one,😶 HaHa~:', str2ByteLength);

 

使用方法总结:

方法名返回值入参
byteLength字符串的字节长度第一个参数必填,表示需要判断的字符串

4 发送JSONP跨域请求 

jsonp跨域请求大家并不陌生,现实工作中也会经常遇到,需要的时候就写一个,放到utils目录下,这样太重复造车轮啦,我们现在终于有了共有方法。

再下面的示例代码中,我们本站的IP是localhost,端口是8080,请求服务端目标IP为127.0.0.1,端口为3000,正是属于跨域场景,示例代码如下:

ajaxBox.sendJSONP('http://127.0.0.1:3000/users/bar', 'callback', function(data){console.log('获取到的JSONP请求数据', data);
});

 

使用方法总结: 

方法名返回值入参
sendJSONP服务端数据

第一个参数必填,表示JSONP请求的url;

第二个参数必填,写入一个字符串,例如“callback”;

第三个参数必填,是一个回调函数,表示前端接收数据的回调方法

好啦,这一小节的新增功能就这3个,感谢小伙伴提供需求。 

这篇关于前端JS必用工具【js-tool-big-box】,验证是否是Unicode字符,获取一个字符串的字节长度,以及新增发送JSONP跨域请求的方法的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/971484

相关文章

Java实现字节字符转bcd编码

《Java实现字节字符转bcd编码》BCD是一种将十进制数字编码为二进制的表示方式,常用于数字显示和存储,本文将介绍如何在Java中实现字节字符转BCD码的过程,需要的小伙伴可以了解下... 目录前言BCD码是什么Java实现字节转bcd编码方法补充总结前言BCD码(Binary-Coded Decima

python获取指定名字的程序的文件路径的两种方法

《python获取指定名字的程序的文件路径的两种方法》本文主要介绍了python获取指定名字的程序的文件路径的两种方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要... 最近在做项目,需要用到给定一个程序名字就可以自动获取到这个程序在Windows系统下的绝对路径,以下

Vue和React受控组件的区别小结

《Vue和React受控组件的区别小结》本文主要介绍了Vue和React受控组件的区别小结,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学... 目录背景React 的实现vue3 的实现写法一:直接修改事件参数写法二:通过ref引用 DOMVu

Java实现将HTML文件与字符串转换为图片

《Java实现将HTML文件与字符串转换为图片》在Java开发中,我们经常会遇到将HTML内容转换为图片的需求,本文小编就来和大家详细讲讲如何使用FreeSpire.DocforJava库来实现这一功... 目录前言核心实现:html 转图片完整代码场景 1:转换本地 HTML 文件为图片场景 2:转换 H

C#使用Spire.Doc for .NET实现HTML转Word的高效方案

《C#使用Spire.Docfor.NET实现HTML转Word的高效方案》在Web开发中,HTML内容的生成与处理是高频需求,然而,当用户需要将HTML页面或动态生成的HTML字符串转换为Wor... 目录引言一、html转Word的典型场景与挑战二、用 Spire.Doc 实现 HTML 转 Word1

Vue3绑定props默认值问题

《Vue3绑定props默认值问题》使用Vue3的defineProps配合TypeScript的interface定义props类型,并通过withDefaults设置默认值,使组件能安全访问传入的... 目录前言步骤步骤1:使用 defineProps 定义 Props步骤2:设置默认值总结前言使用T

Three.js构建一个 3D 商品展示空间完整实战项目

《Three.js构建一个3D商品展示空间完整实战项目》Three.js是一个强大的JavaScript库,专用于在Web浏览器中创建3D图形,:本文主要介绍Three.js构建一个3D商品展... 目录引言项目核心技术1. 项目架构与资源组织2. 多模型切换、交互热点绑定3. 移动端适配与帧率优化4. 可

SpringBoot 获取请求参数的常用注解及用法

《SpringBoot获取请求参数的常用注解及用法》SpringBoot通过@RequestParam、@PathVariable等注解支持从HTTP请求中获取参数,涵盖查询、路径、请求体、头、C... 目录SpringBoot 提供了多种注解来方便地从 HTTP 请求中获取参数以下是主要的注解及其用法:1

SpringBoot请求参数传递与接收示例详解

《SpringBoot请求参数传递与接收示例详解》本文给大家介绍SpringBoot请求参数传递与接收示例详解,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋... 目录I. 基础参数传递i.查询参数(Query Parameters)ii.路径参数(Path Va

基于Python实现自动化邮件发送系统的完整指南

《基于Python实现自动化邮件发送系统的完整指南》在现代软件开发和自动化流程中,邮件通知是一个常见且实用的功能,无论是用于发送报告、告警信息还是用户提醒,通过Python实现自动化的邮件发送功能都能... 目录一、前言:二、项目概述三、配置文件 `.env` 解析四、代码结构解析1. 导入模块2. 加载环