前端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

相关文章

全面解析HTML5中Checkbox标签

《全面解析HTML5中Checkbox标签》Checkbox是HTML5中非常重要的表单元素之一,通过合理使用其属性和样式自定义方法,可以为用户提供丰富多样的交互体验,这篇文章给大家介绍HTML5中C... 在html5中,Checkbox(复选框)是一种常用的表单元素,允许用户在一组选项中选择多个项目。本

HTML5 搜索框Search Box详解

《HTML5搜索框SearchBox详解》HTML5的搜索框是一个强大的工具,能够有效提升用户体验,通过结合自动补全功能和适当的样式,可以创建出既美观又实用的搜索界面,这篇文章给大家介绍HTML5... html5 搜索框(Search Box)详解搜索框是一个用于输入查询内容的控件,通常用于网站或应用程

基于Python实现一个Windows Tree命令工具

《基于Python实现一个WindowsTree命令工具》今天想要在Windows平台的CMD命令终端窗口中使用像Linux下的tree命令,打印一下目录结构层级树,然而还真有tree命令,但是发现... 目录引言实现代码使用说明可用选项示例用法功能特点添加到环境变量方法一:创建批处理文件并添加到PATH1

CSS3中的字体及相关属性详解

《CSS3中的字体及相关属性详解》:本文主要介绍了CSS3中的字体及相关属性,详细内容请阅读本文,希望能对你有所帮助... 字体网页字体的三个来源:用户机器上安装的字体,放心使用。保存在第三方网站上的字体,例如Typekit和Google,可以link标签链接到你的页面上。保存在你自己Web服务器上的字

使用jenv工具管理多个JDK版本的方法步骤

《使用jenv工具管理多个JDK版本的方法步骤》jenv是一个开源的Java环境管理工具,旨在帮助开发者在同一台机器上轻松管理和切换多个Java版本,:本文主要介绍使用jenv工具管理多个JD... 目录一、jenv到底是干啥的?二、jenv的核心功能(一)管理多个Java版本(二)支持插件扩展(三)环境隔

SpringBoot服务获取Pod当前IP的两种方案

《SpringBoot服务获取Pod当前IP的两种方案》在Kubernetes集群中,SpringBoot服务获取Pod当前IP的方案主要有两种,通过环境变量注入或通过Java代码动态获取网络接口IP... 目录方案一:通过 Kubernetes Downward API 注入环境变量原理步骤方案二:通过

Springboot3+将ID转为JSON字符串的详细配置方案

《Springboot3+将ID转为JSON字符串的详细配置方案》:本文主要介绍纯后端实现Long/BigIntegerID转为JSON字符串的详细配置方案,s基于SpringBoot3+和Spr... 目录1. 添加依赖2. 全局 Jackson 配置3. 精准控制(可选)4. OpenAPI (Spri

关于跨域无效的问题及解决(java后端方案)

《关于跨域无效的问题及解决(java后端方案)》:本文主要介绍关于跨域无效的问题及解决(java后端方案),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录通用后端跨域方法1、@CrossOrigin 注解2、springboot2.0 实现WebMvcConfig

Python使用smtplib库开发一个邮件自动发送工具

《Python使用smtplib库开发一个邮件自动发送工具》在现代软件开发中,自动化邮件发送是一个非常实用的功能,无论是系统通知、营销邮件、还是日常工作报告,Python的smtplib库都能帮助我们... 目录代码实现与知识点解析1. 导入必要的库2. 配置邮件服务器参数3. 创建邮件发送类4. 实现邮件

html 滚动条滚动过快会留下边框线的解决方案

《html滚动条滚动过快会留下边框线的解决方案》:本文主要介绍了html滚动条滚动过快会留下边框线的解决方案,解决方法很简单,详细内容请阅读本文,希望能对你有所帮助... 滚动条滚动过快时,会留下边框线但其实大部分时候是这样的,没有多出边框线的滚动条滚动过快时留下边框线的问题通常与滚动条样式和滚动行