javascript字符串进行编码的方法:escape编码、encodeURI编码、encodeURIComponent编码

更新日期: 2017-12-14阅读: 3.1k标签: Component

1.escape();

语法
escape(string) // string 必需。要被转义或编码的字符串。
返回值
已编码的 string 的副本。其中某些字符被替换成了十六进制的转义序列。
说明:
该方法不会对 ASCII 字母和数字进行编码,也不会对下面这些 ASCII 标点符号进行编码:** * @ - _ + . / **
解码:
unescape();
提示:
ECMAScript v3 反对使用该方法,用 encodeURI() 和 encodeURIComponent() 替代它。但是如果想转义单引号,用这个就蛮好的。
例子

console.log(escape("Visit W3School!"))  //Visit%20W3School%21
console.log(escape("?!=()#%&")) //%3F%21%3D%28%29%23%25%26
console.log(escape("*@-_+./"))  //*@-_+./
console.log(escape("'"))    //%27


2.encodeURI();

语法:
encodeURI(URIstring) // URIstring 必需。一个字符串,含有 URI 或其他要编码的文本。
返回值:
已编码的 URIstring 的副本,其中的某些字符将被十六进制的转义序列进行替换。
说明:
该方法不会对 ASCII 字母和数字进行编码,也不会对这些 ASCII 标点符号进行编码:** - _ . ! ~ * ' ( ) **
该方法的目的是对 URI 进行完整的编码,因此对以下在 URI 中具有特殊含义的 ASCII 标点符号,encodeURI() 函数是不会进行转义的:;/?:@&=+$,#
提示:
如果 URI 组件中含有分隔符,比如 ? 和 #,则应当使用 encodeURIComponent() 方法分别对各组件进行编码。
例子:

console.log(encodeURI("http://www.w3school.com.cn"))    //http://www.w3school.com.cn
console.log(encodeURI("http://www.w3school.com.cn/yzb/"))   //http://www.w3school.com.cn/yzb/
console.log(encodeURI(";/?:@&=+$,#"))   //;/?:@&=+$,#
console.log(encodeURI("-_.!~*'()")) //-_.!~*'()
console.log(encodeURI(" ")) //%20


3.encodeURIComponent();

语法:
encodeURIComponent(URIstring) // URIstring 必需。一个字符串,含有 URI 组件或其他要编码的文本。
返回值:
已编码的 URIstring 的副本,其中的某些字符将被十六进制的转义序列进行替换。
说明:
该方法不会对 ASCII 字母和数字进行编码,也不会对这些 ASCII 标点符号进行编码: ** - _ . ! ~ * ' ( ) **
其他字符(比如:** ;/?:@&=+$,# ** 这些用于分隔 URI 组件的标点符号),都是由一个或多个十六进制的转义序列替换的。
提示:
请注意 encodeURIComponent() 函数 与 encodeURI() 函数的区别之处,前者假定它的参数是 URI 的一部分(比如协议、主机名、路径或查询字符串)。因此 encodeURIComponent() 函数将转义用于分隔 URI 各个部分的标点符号。
例子:

console.log(encodeURIComponent("http://www.w3school.com.cn"))   //http%3A%2F%2Fwww.w3school.com.cn
console.log(encodeURIComponent("http://www.w3school.com.cn/yzb/"))  //http%3A%2F%2Fwww.w3school.com.cn%2Fyzb%2F
console.log(encodeURIComponent(";/?:@&=+$,#"))  //%3B%2F%3F%3A%40%26%3D%2B%24%2C%23
console.log(encodeURIComponent("-_.!~*'()"))    //-_.!~*'()
console.log(encodeURIComponent(" "))    //%20

链接: https://fly63.com/article/detial/249

使用纯粹的JS构建 Web Component

Web Component 出现有一阵子了。 Google 费了很大力气去推动它更广泛的应用,但是除 Opera 和 Chrome 以外的多数主流浏览器对它的支持仍然不够理想。Web Component 是一系列 web 平台的 API,它们可以允许你创建全新可定制、可重用并且封装的 HTML 标签,从而在普通网页及 web 应用中使用。

ReactJS Components: 基础指南

创建和管理React组件的各种方式,涌现的大量状态管理工具等等都是这些挑战的焦点。我们今天能做的就是在React(基于社区选择)中将最常用的做法引入桌面并讨论它们。

从VantComponent 谈小程序维护

在开发小程序的时候,我们总是期望用以往的技术规范和语法特点来书写当前的小程序,所以才会有各色的小程序框架,例如 mpvue、taro 等这些编译型框架

react如何通过shouldComponentUpdate来减少重复渲染

在react开发中,经常会遇到组件重复渲染的问题,父组件一个state的变化,就会导致以该组件的所有子组件都重写render,尽管绝大多数子组件的props没有变化

react中的element、component、instance的理解

在React中无论是class形式(render函数)还是function形式(return的内容)的组件,最后返回的jsx其实质是React.createElement函数的结果,而React.createElement函数返回的结果是一个对象树,我们可以称之为元素描述树

React中PureComponent 和 Component区别

我们来看一看 Component 和 PureComponent 的区别,我们先从问题出发,通过解决实际的问题来查询出 PureComponent 和 Component 之间区别。这里创建 Greeting 的组件,其中我们用 setInterval 每间隔 2 秒就更新状态title一次

如何评价 Vue 的 Function-based Component?

react 的不可变,纯函数。直接导致 hooks 必须使用 const 关键字,不能是 let,这也是 hooks 的奇迹之一;Hooks对Fiber更好 -> Hooks是Fiber的产物 -> 没有Fiber就不是Hooks

React Server Component 可能并没有那么香

前段时间 React 团队发布了一项用于解决 React 页面在多接口请求下的性能问题的解决方案 React Server Components。当然该方案目前还在草案阶段,官方也只是发了视频和一个示例 demo 来说明这个草案。

Vue.js 中使用defineAsyncComponent 延迟加载组件

使用 Vue 3 的 defineAsyncComponent 特性可以让我们延迟加载组件。这意味着它们仅在需要时从服务器加载。这是改善初始页面加载的好方法,因为我们的应用程序将以较小的块加载,而不必在页面加载时加载每个组件。

Web Components中引入外部CSS的8种方法

开发中,还是会遇到需要引入外部CSS到Shadow DOM情况,那么如何处理呢?作者就最近遇到的情况给出如下几种方案。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!