javascript截取字符串-js判断字符宽度（包括英文、法文和数字）

bendan520 javascript

2023-08-21 0 2,626 百度已收录

立即下单

进入商城

进不了网站？换个网络试试！

首先上传代码：

<code class="prism language-js">function strCode(str) {  //获取字符串的字节数
    var count = 0;  //初始化字节数递加变量并获取字符串参数的字符个数
    if (str) {  //如果存在字符串，则执行
        len = str.length; 
        for (var i = 0; i < len; i++) {  //遍历字符串，枚举每个字符
            if (str.charCodeAt(i) > 255) {  //字符编码大于255，说明是双字节字符(即是中文)
                count += 2;  //则累加2个
            } else {
                count++;  //否则递加一次
            }
        }
        console.log(count);
        return count;  //返回字节数
    } else {
   		console.log(0);
        return 0;  //如果参数为空，则返回0个
    }
}
var a = '1234567';
var c = '我是第一';
strCode(a);
strCode();
strCode(c);
strCode('asd啊啊啊');

效果如下：

解析：

javascript截取字符串-js判断字符宽度（包括英文、法文和数字）

charCodeAt() charCodeAt() 方法返回指定位置处的字符的 Unicode 编码。字符串中第一个字符的位置为 0javascript截取字符串，第二个字符为 1，依此类推。

语法：

细绳。字符代码At（索引）

参数值：

参数说明

指数

required.代表字符串中位置的数字，即字符串中字符的下标

返回值：

类型描述

数字

返回指定位置字符的 Unicode 编码

例子：

var a = '1x.我'
console.log(a.charCodeAt(0));
console.log(a.charCodeAt(1));
console.log(a.charCodeAt(2));
console.log(a.charCodeAt(3));

影响：

注：当unicode>255时javascript截取字符串，可以判定该字符的字节宽度为2（中文）

参考：

原文链接：

使用 SourceMap 改善 Web 调试体验。

今天，我们将讨论 SourceMap，它是现代 Web 开发中的一个重要工具，可以极大地简化调试。在本文中，我们将解释 SourceMap 的基础知识，包括它们是如何生成的以及它们如何改进调试体验。

SourceMap的必要性

以前javascript压缩，我们使用纯 HTML、CSS 和 JavaScript 构建 Web 应用程序，并将相同的文件部署到 Web。

然而，随着现代 Web 应用程序的复杂性不断增加，您的开发工作流程可能会使用多种工具。例如：

ETC。

开发流程

这些工具将代码转换为标准 HTML、JavaScript 和 CSS 以便浏览器运行。此外javascript压缩，为了优化性能，这些文件通常会被压缩（例如使用 Terser 进行 JavaScript 压缩和混淆）并合并在一起，从而减小其大小并提高 Web 传输效率。

例如，使用构建工具，我们可以将以下 TypeScript 文件转换为一行 JavaScript 并将其缩小。你可以在我的 GitHub 存储库（）中尝试这个演示。

/* A TypeScript demo: example.ts */

document.querySelector('button')?.addEventListener('click', () => {
  const num: number = Math.floor(Math.random() * 101);
  const greet: string = 'Hello';
  (document.querySelector('p') as HTMLParagraphElement).innerText = `${greet}, you are no. ${num}!`;
  console.log(num);
});

压缩版如下：

/* A compressed JavaScript version of the TypeScript demo: example.min.js  */

document.querySelector("button")?.addEventListener("click",(()=>{const e=Math.floor(101*Math.random());document.querySelector("p").innerText=`Hello, you are no. ${e}!`,console.log(e)}));

然而，这种优化可能会使调试变得更加困难。将所有内容放在一行并使用较短的变量名称的精简代码可能会使问题更难以定位。 SourceMap的目的是将编译后的代码映射回原始代码。

生成源映射

SourceMap 是以 .map 结尾的文件，例如 example.min.js.map 和 styles.css.map。它们可以通过大多数构建工具生成，例如 Vite、webpack、Rollup、Parcel、esbuild 等。

有些工具默认包含 SourceMap，而其他工具可能需要额外的配置才能生成。

/* Example configuration: vite.config.js */
/* https://vitejs.dev/config/ */

export default defineConfig({
  build: {
    sourcemap: true, // enable production source maps
  },
  css: {
    devSourcemap: true // enable CSS source maps during development
  }
})

了解 SourceMap

这些 SourceMap 文件包含有关编译后的代码如何映射到原始代码的重要信息，使开发人员可以轻松调试。以下是 SourceMap 的示例。

{
  "mappings": "AAAAA,SAASC,cAAc,WAAWC, ...",
  "sources": ["src/script.ts"],
  "sourcesContent": ["document.querySelector('button')..."],
  "names": ["document","querySelector", ...],
  "version": 3,
  "file": "example.min.js.map"
}