js技巧--转义符"/"的妙用

// blueDestiny, never-online // blueDestiny [at] 126.com

通常,我们在动态给定一个container的innerHTML时,通常是样做的:
<div id="divc" />
<SCRIPT LANGUAGE="JavaScript">
var div = document.getElementById("divc");
var html = ""
html += ""
+ "<h1>"
+ "<a href='javascript:;' onclick=/"alert('javascript')/">DHTML innerHTML propery.</a>"
+ "</h1>";
div.innerHTML = html;
</SCRIPT>

写得习惯了的话,倒也不麻烦,但有没有更简单的一个方法呢?请看下面的例子:

<SCRIPT LANGUAGE="JavaScript">
var html='/
<table width="100%" border="0" cellspacing="0" cellpadding="0">/
 <tr>/
  <td>&nbsp;</td>/
 </tr>/
 <tr>/
  <td>&nbsp;</td>/
 </tr>/
</table>/
';
alert(html);
</SCRIPT>
是不是没有这么麻烦了?但还是要有几点注意,看下面的例子
<SCRIPT LANGUAGE="JavaScript">
//要用/'把单引号转义
var html='/
 <h1>/
 javascript技巧/
 </h1>/
 <a href="javascript:;" onclick="alert(/'javascript/')">javascript转义</a></font>/
 <br/>/
 power by /'blueDestiny, never-online/'/
';
alert(html);
</SCRIPT>
该转义的地方还是得用"/"

'-------------------------------------------------------
'   原理:
'-------------------------------------------------------
这个是我自己的个人观点,如果有不对的地方,请指出:
还是看个例子:
<SCRIPT LANGUAGE="JavaScript">
//s1和s2的字符a前都有一个空格
s1='/
 a';
s2=' a';
document.write("s1: " + s1.length + "/ns2: " + s2.length);
</SCRIPT>
输出结果:
s1: 2 s2: 2
也就是说转义符将回车转义掉了!也就是说
再看个例子:
<SCRIPT LANGUAGE="JavaScript">
//下面这个字符串是有空格的,也就是这样s1='/ 的。
s1='/
a';
document.write("s1: " + s1.length);
</SCRIPT>
输出错误,错误提示:未结束字符串常量。
也就是说是多加了一个空格的原因。那再这样试试
<SCRIPT LANGUAGE="JavaScript">
s1='/ /
a';
document.write("s1: " + s1.length);
</SCRIPT>
结果很明显了,在字符串中,"/"转义符可以将回车转义掉(也就是回车符不存在了),但是不能将制表符,以及空格字符转义(它们是存在的,上面的例子说明了这一点)。

最后,给大家一个小tips,还记得上面的这个代码吗?
<SCRIPT LANGUAGE="JavaScript">
//要用/'把单引号转义
var html='/
 <h1>/
 javascript技巧/
 </h1>/
 <a href="javascript:;" onclick="alert(/'javascript/')">javascript转义</a></font>/
 <br/>/
 power by /'blueDestiny, never-online/'/
';
alert(html);
</SCRIPT>
仔细观察弹出来的模态框,看看字符串是怎么样的?应该就会明白了。





本文转自
http://blog.youkuaiyun.com/BlueDestiny/archive/2006/03/15/625061.aspx

<think>我们正在解决一个关于core-js模块缺失的问题。用户遇到了多个core-js模块未找到的错误,具体包括: es.iterator.constructor.js, es.iterator.filter.js, es.iterator.for-each.js, es.iterator.map.js 这些模块都是core-js库中关于迭代器(Iterator)的polyfill。core-js是一个标准JavaScript库,它提供了ES5、ES6、ES7等标准的polyfill。 ### 可能的原因 1. **core-js版本问题**:可能安装的core-js版本过低,不包含这些模块;或者版本过高,模块路径发生了变化。 2. **构建工具配置问题**:如Webpack、Babel等构建工具可能没有正确配置core-js的引入方式。 3. **依赖关系问题**:项目中可能没有正确安装core-js,或者多个依赖引用了不同版本的core-js导致冲突。 4. **按需引入问题**:如果使用了按需引入(例如通过@babel/preset-env的useBuiltIns),可能配置不正确,导致没有引入这些模块。 ### 解决步骤 #### 步骤1: 确认core-js安装 首先,确保项目中已经安装了core-js。可以通过以下命令安装(如果尚未安装): ```bash npm install core-js@3 --save # 或者 yarn add core-js@3 ``` 注意:我们使用core-js的版本3,因为版本2和3的模块路径和结构有所不同。这些模块(es.iterator.*)在core-js版本3中才存在。 #### 步骤2: 检查Babel配置 如果项目中使用Babel进行转译,需要配置@babel/preset-env来使用core-js。 在`.babelrc`或`babel.config.js`中,确保有以下配置: ```json { "presets": [ ["@babel/preset-env", { "useBuiltIns": "usage", // 或者 "entry" "corejs": 3 }] ] } ``` - `corejs`: 指定core-js的版本,这里应该是3。 - `useBuiltIns`: - 如果设置为`"usage"`,Babel会按需引入polyfill,只引入代码中需要的polyfill。这可能会减少包的大小,但有时可能会遗漏一些polyfill。 - 如果设置为`"entry"`,需要在项目入口文件顶部引入core-js,例如: ```javascript import "core-js/stable"; ``` 这样会引入所有稳定的polyfill。 如果之前使用的是`useBuiltIns: "usage"`,但出现了某些polyfill缺失,可以尝试切换到`useBuiltIns: "entry"`,并在入口文件引入core-js。 #### 步骤3: 检查Webpack配置 如果项目使用Webpack,确保没有通过配置排除core-js。同时,检查别名(alias)设置,确保没有将core-js的路径指向错误的地方。 在Webpack配置中,可以添加一个别名来确保core-js被正确解析: ```javascript module.exports = { // ... resolve: { alias: { 'core-js': path.resolve(__dirname, 'node_modules/core-js'), } } }; ``` #### 步骤4: 检查依赖冲突 使用以下命令检查项目中core-js的版本和依赖关系: ```bash npm ls core-js # 或 yarn why core-js ``` 如果存在多个版本,尝试统一版本。可以通过在package.json中指定一个确切的core-js版本,然后重新安装: ```json "dependencies": { "core-js": "^3.25.0" } ``` #### 步骤5: 手动引入缺失的polyfill 如果以上步骤没有解决问题,可以在入口文件顶部手动引入缺失的polyfill: ```javascript import "core-js/modules/es.iterator.constructor"; import "core-js/modules/es.iterator.filter"; import "core-js/modules/es.iterator.for-each"; import "core-js/modules/es.iterator.map"; ``` ### 注意事项 - 确保所有构建工具的缓存被清除(例如Webpack的缓存、Babel的缓存),然后重新构建项目。 - 如果项目中有多个入口文件,确保在每个入口文件都进行了必要的引入。 ### 示例配置 以下是一个使用core-js和Babel的完整示例: 1. 安装依赖: ```bash npm install --save core-js@3 npm install --save-dev @babel/core @babel/preset-env ``` 2. `babel.config.js`: ```javascript module.exports = { presets: [ [ '@babel/preset-env', { useBuiltIns: 'usage', corejs: 3, targets: "> 0.25%, not dead" } ] ] }; ``` 3. 入口文件(例如`index.js`): ```javascript // 如果使用useBuiltIns: 'entry',则需要添加下面一行 // import "core-js/stable"; ``` ### 相关问题 1. 如何检测项目中是否存在core-js版本冲突? 2. 使用core-js时,如何优化打包体积? 3. 除了core-js,还有哪些常用的polyfill库? 通过以上步骤,应该能够解决core-js模块未找到的问题。如果问题仍然存在,请提供更多关于项目环境的信息(如使用的构建工具、框架等)。</think>针对项目中出现的 core-js 模块缺失问题(`es.iterator.constructor.js`, `es.iterator.filter.js`, `es.iterator.for-each.js`, `es.iterator.map.js`),以下是系统性的解决方案: ### 问题原因分析 这些模块属于 JavaScript 迭代器(Iterator)的 polyfill 实现,通常由以下原因导致缺失: 1. **core-js 版本不兼容**(常见于 v2→v3 升级) 2. **Babel 配置错误**(未正确指定 polyfill 引入方式) 3. **构建工具路径解析失败**(Webpack/Vite 未正确解析 core-js 路径) 4. **依赖冲突**(多个 core-js 版本共存) --- ### 解决方案步骤 #### 步骤 1:统一 core-js 版本 ```bash # 安装最新稳定版 (推荐 v3.25+) npm install core-js@3 --save # 或指定精确版本 yarn add core-js@3.25.5 ``` #### 步骤 2:配置 Babel (关键步骤) 在 `babel.config.js` 中明确指定 core-js 版本和引入方式: ```javascript module.exports = { presets: [ [ "@babel/preset-env", { useBuiltIns: "usage", // 自动按需引入 polyfill corejs: 3, // 明确指定 core-js 版本 targets: "> 0.25%, not dead" } ] ] }; ``` #### 步骤 3:检查 Webpack 配置 在 `webpack.config.js` 中添加路径别名(解决模块解析问题): ```javascript module.exports = { resolve: { alias: { "core-js": path.resolve(__dirname, "node_modules/core-js"), }, }, }; ``` #### 步骤 4:入口文件手动引入(备选方案) 在应用入口文件(如 `src/index.js`)顶部添加: ```javascript import "core-js/stable/iterator"; import "core-js/stable/iterator/filter"; import "core-js/stable/iterator/for-each"; import "core-js/stable/iterator/map"; ``` #### 步骤 5:验证依赖树 检查版本冲突: ```bash npm ls core-js # 应输出单一版本 (如 core-js@3.25.5) ``` 若存在多个版本,在 `package.json` 中添加 resolutions 强制统一版本: ```json { "resolutions": { "core-js": "3.25.5" } } ``` --- ### 注意事项 1. **删除构建缓存**:执行构建前运行 `npm run clean` 或手动删除 `node_modules/.cache` 目录 2. **检查浏览器目标**:在 `.browserslistrc` 中避免过时浏览器配置(如 IE) 3. **Vite 用户**:需使用 `@vitejs/plugin-legacy` 插件处理 polyfill > 通过以上步骤,95% 的 core-js 迭代器缺失问题可被解决。若问题仍存在,建议检查第三方库是否捆绑了旧版 core-js[^1]。 --- ### 相关问题 1. 如何检测项目中是否存在多个 core-js 版本冲突? 2. 使用 `useBuiltIns: "usage"` 和 `"entry"` 在 polyfill 引入上有何区别? 3. 在 Vite 项目中如何正确配置 core-js polyfill? 4. 为什么现代前端框架推荐使用 core-js 替代 @babel/polyfill? [^1]: core-js 官方迁移指南指出,v2→v3 的模块路径变更常导致此类问题。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值