如何让别人看不懂你的 JS 代码？

们在上周的文章中一种奇特的 JavaScript 编码风格：Get 一种可以用来装逼的 JavaScript 编码风格，引起了广大网友的热议。

这是实际上属于一种代码混淆技术，可以让们的代码更难阅读和逆向，同时也能租网一些恶意爬虫和自动化分析。天我就带大家来看看还有哪些其他能让 JavaScript 代码变得难以分析的代码混淆技术。

我们以下面这段代码为例：

<pre class="hljs less" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 0.75em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">console.log("ConardLi",666);</pre>

通过一些转换，它可以变成下面这个样子：

怎么做到的呢？我们一起来看一下～

十六进制字符串编码

我们尝试去 Javascript Obfuscator 这个网站，选中 Encode Strings 复选框，将得到下面的代码：

<pre class="prettyprint hljs markdown" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">console["\x6C\x6F\x67"]("\x43\x6F\x6E\x61\x72\x64\x4C\x69\x20"+ 666)</pre>

它的原理很简单，就是将字符串的每个 ASCII? 字符转换为十六进制形式（将函数调用改为用括号的形式，例如 console.log? -> console['log'] 在代码混淆中也是相当常见的做法），这就是最简单的混淆了，但是只能骗骗小白，我们可以轻易的反解：

这种技术还有一些其他变体，比如用 unicode 编码替换字符。

https://javascriptobfuscator.com/Javascript-Obfuscator.aspx

字符串数组映射

还是在上面的网站，我们选中 Move Strings 这个选项，得到的代码是下面这样的：

<pre class="prettyprint hljs markdown" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">var _0x8925=["\x43\x6F\x6E\x61\x72\x64\x4C\x69\x20","\x6C\x6F\x67"];
console[_0x8925[1]](_0x8925[0]+ 666)</pre>

多了个字符串数组，通过在不同索引处引入数组来间接使用这些字符串。

死代码注入

死代码其实指的就是一些无法访问的代码，我们可以在原本的代码上额外注入一些永远无法访问的代码来让代码难以阅读，但是同时也会让代码变得更大。这次我们尝试一下 defendjs：

安装：

<pre class="hljs ruby" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 0.75em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">$ npm install -g https://github.com/alexhorn/defendjs.git</pre>

我们尝试创建一个 conardli.js 并且将上面的代码放入这个文件，执行下面的命令：

<pre class="hljs verilog" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 0.75em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">$ defendjs --input conardli.js --features dead_code --output .</pre>

得到了下面这一大坨代码：

<pre class="prettyprint hljs javascript" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">(function () {
    function a(a, d) {
        var b=new Array(0);;
        var c=arguments;
        while (true)
            try {
                switch (a) {
                case 21309:
                    return;
                case 792:
                    function e(a, b) {
                        return Array.prototype.slice.call(a).concat(Array.prototype.slice.call(b));
                    }
                    function f() {
                        var a=arguments[0], c=Array.prototype.slice.call(arguments, 1);
                        var b=function () {
                            return a.apply(this, c.concat(Array.prototype.slice.call(arguments)));
                        };
                        b.prototype=a.prototype;
                        return b;
                    }
                    function g(a, b) {
                        return Array.prototype.slice.call(a, b);
                    }
                    function h(b) {
                        var c={};
                        for (var a=0; a < b.length; a +=2) {
                            c[b[a]]=b[a + 1];
                        }
                        return c;
                    }
                    function i(a) {
                        return a.map(function (a) {
                            return String.fromCharCode(a & ~0 >>> 16) + String.fromCharCode(a >> 16);
                        }).join('');
                    }
                    function j() {
                        return String.fromCharCode.apply(null, arguments);
                    }
                    console.log('ConardLi', 666);
                    a=21309;
                    break;
                }
            } catch (b) {
                $defendjs$tobethrown=null;
                switch (a) {
                default:
                    throw b;
                }
            }
    }
    a(792, {});
}())</pre>

代码很大，其实仔细分析就会发现其余插入的代码都是无法运行的：

最顶层包了一个 IIFE?，然后有一个 a? 函数，a、b? 两个参数。调用 a? 函数时只传入了第一个参数 792，然后就会发现 a 函数里有个 switch? 语句，只会执行到第二个 case，里面是这样的语句：

e、f、g、h、j、i 这几个函数都是没有调用的，所以只会执行最后的 console.log('ConardLi', 666); 语句 ...

https://github.com/alexhorn/defendjs

作用域混淆

我们将代码还原回去，重新执行 defendjs? 的 scope 能力：

<pre class="hljs verilog" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 0.75em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">$ defendjs --input conardli.js --features scope --output .</pre>

<pre class="prettyprint hljs clojure" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">(function () {
    {
        {
            function b(a, b) {
                return Array.prototype.slice.call(a).concat(Array.prototype.slice.call(b));
            }
            function c() {
                var a=arguments[0], c=Array.prototype.slice.call(arguments, 1);
                var b=function () {
                    return a.apply(this, c.concat(Array.prototype.slice.call(arguments)));
                };
                b.prototype=a.prototype;
                return b;
            }
            function d(a, b) {
                return Array.prototype.slice.call(a, b);
            }
            function e(b) {
                var c={};
                for (var a=0; a < b.length; a +=2) {
                    c[b[a]]=b[a + 1];
                }
                return c;
            }
            function f(a) {
                return a.map(function (a) {
                    return String.fromCharCode(a & ~0 >>> 16) + String.fromCharCode(a >> 16);
                }).join('');
            }
            function g() {
                return String.fromCharCode.apply(null, arguments);
            }
        }
        var a=[];
        console.log('ConardLi', 666);
    }
}())</pre>

这个可能看起来像是前面的一个简单版本，但是有一个关键的区别：它引入了多个具有重复标识符的词法作用域。例如，a? 可能是最内层作用域中第一个函数的参数，也可以是第二个函数中的变量，甚至可以是与我们的 conaole.log 语句相同作用域中的变量。在这个简单的示例中，很容易看穿，因为最内层范围内的任何函数都不会在任何地方被调用，但是，现实的业务代码往往是很复杂的，混淆后就不那么容易看穿了。

字符编码

还是使用 defendjs ，对我们的代码执行下面的命令：

<pre class="hljs verilog" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 0.75em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">$ defendjs --input conardli.js --features literals --output .</pre>

得到下面的代码：

<pre class="prettyprint hljs clojure" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">(function () {
    function c() {
        var c=arguments;
        var b=[];
        b[1]='';
        b[1] +=a(67, 111, 110);
        b[1] +=a(97);
        b[1] +=a(114, 100);
        b[1] +=a(76, 105);
        return b[1];
    }
    {
        {
            function e(a, b) {
                return Array.prototype.slice.call(a).concat(Array.prototype.slice.call(b));
            }
            function d() {
                var a=arguments[0], c=Array.prototype.slice.call(arguments, 1);
                var b=function () {
                    return a.apply(this, c.concat(Array.prototype.slice.call(arguments)));
                };
                b.prototype=a.prototype;
                return b;
            }
            function f(a, b) {
                return Array.prototype.slice.call(a, b);
            }
            function g(b) {
                var c={};
                for (var a=0; a < b.length; a +=2) {
                    c[b[a]]=b[a + 1];
                }
                return c;
            }
            function h(a) {
                return a.map(function (a) {
                    return String.fromCharCode(a & ~0 >>> 16) + String.fromCharCode(a >> 16);
                }).join('');
            }
            function a() {
                return String.fromCharCode.apply(null, arguments);
            }
        }
        var b=[];
        console.log(d(c, b)(), 666);
    }
}())</pre>

在这种情况下，硬编码会被转换成 Unicode 然后重新计算，这样直接阅读代码就很难再直接看穿硬编码的字符串了。

变量缩短

Mangling 是一种为了优化和混淆目的而缩短变量和属性名称的转换。比如下面的代码：

<pre class="prettyprint hljs vbscript" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">let sixSixSix=666;
let name="ConardLi ";
console.log(name + sixSixSix);</pre>

我们使用 DefendJS? 的 mangling 功能：

<pre class="hljs verilog" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 0.75em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">$ defendjs --input conardli.js --features mangle --output .</pre>

得到的代码是：

<pre class="prettyprint hljs scheme" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">(function () {
    var a=666;
    var b='ConardLi! ';
    console.log(b + a);
}())</pre>

两个变量都被重新命名了，在这个简单的例子下还是很好分析的。但是如果是庞大的业务代码，这会让我们的代码变得非常难以阅读。

代码压缩

下面，综合利用一下几种技术，执行：

<pre class="prettyprint hljs verilog" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">defendjs --input conardli.js --output . --features=control_flow,literals,mangle,compress</pre>

得到下面的代码：

<pre class="prettyprint hljs javascript" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">(function(){function a(d,g){var b=new Array(1);;var e=arguments;while(true)t</pre>

来源： https://developer.51cto.com/article/714813.html

avaScript不断发展壮大，
因为它是最容易上手的语言之一，因此为市场上的新成为技术怪才打开了大门。（问号脸？）

的确，JavaScript可以做很多出色的事情！还有很多东西要学习。

而且，无论你是JavaScript的新手还是更多的专业开发人员，学习新知识总是一件好事。

本文整理了一些非常有用的单行代码（20+），这些单行代码可以帮助你提高工作效率并可以帮助调试代码。

什么是单行代码？

单行代码是一种代码实践，其中我们仅用一行代码执行某些功能。

01-随机获取布尔值

此函数将使用Math.random()方法返回布尔值（真或假）。
Math.random创建一个介于0和1之间的随机数，然后我们检查它是否大于或小于0.5。
这意味着有50/50的机会会得到对或错。

const getRandomBoolean = () => Math.random() >= 0.5;

console.log(getRandomBoolean());
// a 50/50 chance of returning true or false

02-检查日期是否为周末

通过此功能，你将能够检查提供的日期是工作日还是周末。

const isWeekend = (date) => [0, 6].indexOf(date.getDay()) !== -1;

console.log(isWeekend(new Date(2021, 4, 14)));
// false (Friday)
console.log(isWeekend(new Date(2021, 4, 15)));
// true (Saturday)

03-检查数字是偶数还是奇数

简单的实用程序功能，用于检查数字是偶数还是奇数。

const isEven = (num) => num % 2 === 0;

console.log(isEven(5));
// false
console.log(isEven(4));
// true

04-获取数组中的唯一值(数组去重)

从数组中删除所有重复值的非常简单的方法。此函数将数组转换为Set，然后返回数组。

const uniqueArr = (arr) => [...new Set(arr)];

console.log(uniqueArr([1, 2, 3, 1, 2, 3, 4, 5]));
// [1, 2, 3, 4, 5]

05-检查变量是否为数组

一种检查变量是否为数组的干净简便的方法。

当然，也可以有其他方法

const isArray = (arr) => Array.isArray(arr);

console.log(isArray([1, 2, 3]));
// true
console.log(isArray({ name: 'Ovi' }));
// false
console.log(isArray('Hello World'));
// false

06-在两个数字之间生成一个随机数

这将以两个数字为参数，并将在这两个数字之间生成一个随机数！

const random = (min, max) => Math.floor(Math.random() * (max - min + 1) + min);

console.log(random(1, 50));
// could be anything from 1 - 50

07-生成随机字符串（唯一ID？）

也许你需要临时的唯一ID，这是一个技巧，你可以使用它在旅途中生成随机字符串。

const randomString = () => Math.random().toString(36).slice(2);

console.log(randomString());
// could be anything!!!

08-滚动到页面顶部

所述window.scrollTo（）方法把一个X和Y坐标滚动到。
如果将它们设置为零和零，我们将滚动到页面顶部。

image.png

const scrollToTop = () => window.scrollTo(0, 0);

scrollToTop();

09-切换布尔

切换布尔值是非常基本的编程问题之一，可以通过许多不同的方法来解决。
代替使用if语句来确定将布尔值设置为哪个值，你可以使用函数使用！翻转当前值。非运算符。

// bool is stored somewhere in the upperscope
const toggleBool = () => (bool = !bool);
//or
const toggleBool = b => !b;

10-交换两个变量

下面的代码是不使用第三个变量而仅使用一行代码即可交换两个变量的更简单方法之一。

[foo, bar] = [bar, foo];

11-计算两个日期之间的天数

要计算两个日期之间的天数，
我们首先找到两个日期之间的绝对值，然后将其除以86400000（等于一天中的毫秒数），最后将结果四舍五入并返回。

const daysDiff = (date, date2) => Math.ceil(Math.abs(date - date2) / 86400000);

console.log(daysDiff(new Date('2021-05-10'), new Date('2021-11-25')));
// 199

12-将文字复制到剪贴板

PS：你可能需要添加检查以查看是否存在navigator.clipboard.writeText

const copyTextToClipboard = async (text) => {
  await navigator.clipboard.writeText(text);
};

13-合并多个数组的不同方法

有两种合并数组的方法。其中之一是使用concat方法。另一个使用扩展运算符（…）。

PS：我们也可以使用“设置”对象从最终数组中复制任何内容。

// Merge but don't remove the duplications
const merge = (a, b) => a.concat(b);
// Or
const merge = (a, b) => [...a, ...b];

// Merge and remove the duplications
const merge = [...new Set(a.concat(b))];
// Or
const merge = [...new Set([...a, ...b])];

14-获取javascript语言的实际类型

人们有时会使用库来查找JavaScript中某些内容的实际类型，这一小技巧可以节省你的时间（和代码大小）。

const trueTypeOf = (obj) => {
  return Object.prototype.toString.call(obj).slice(8, -1).toLowerCase();
};

console.log(trueTypeOf(''));
// string
console.log(trueTypeOf(0));
// number
console.log(trueTypeOf());
// undefined
console.log(trueTypeOf(null));
// null
console.log(trueTypeOf({}));
// object
console.log(trueTypeOf([]));
// array
console.log(trueTypeOf(0));
// number
console.log(trueTypeOf(() => {}));
// function

15-在结尾处截断字符串

需要从头开始截断字符串，这不是问题！

const truncateString = (string, length) => {
  return string.length < length ? string : `${string.slice(0, length - 3)}...`;
};

console.log(
  truncateString('Hi, I should be truncated because I am too loooong!', 36),
);
// Hi, I should be truncated because...

16-从中间截断字符串

从中间截断字符串怎么样？

该函数将一个字符串作为第一个参数，然后将我们需要的字符串大小作为第二个参数，然后从第3个和第4个参数开始和结束需要多少个字符

const truncateStringMiddle = (string, length, start, end) => {
  return `${string.slice(0, start)}...${string.slice(string.length - end)}`;
};

console.log(
  truncateStringMiddle(
    'A long story goes here but then eventually ends!', // string
    25, // 需要的字符串大小
    13, // 从原始字符串第几位开始截取
    17, // 从原始字符串第几位停止截取
  ),
);
// A long story ... eventually ends!

17-大写字符串

好吧，不幸的是，JavaScript没有内置函数来大写字符串，但是这种解决方法可以实现。

const capitalize = (str) => str.charAt(0).toUpperCase() + str.slice(1);

console.log(capitalize('hello world'));

// Hello world

18-检查当前选项卡是否在视图/焦点内

此简单的帮助程序方法根据选项卡是否处于视图/焦点状态而返回true或false

const isTabInView = () => !document.hidden;  // Not hidden

isTabInView();

// true/false

19-检查用户是否在Apple设备上

如果用户使用的是Apple设备，则返回true

const isAppleDevice = () => /Mac|iPod|iPhone|iPad/.test(navigator.platform);

console.log(isAppleDevice);
// true/false

20-三元运算符

当你只想在一行中编写if..else语句时，这是一个很好的代码保护程序。

// Longhand
const age = 18;
let greetings;

if (age < 18) {
  greetings = 'You are not old enough';
} else {
  greetings = 'You are young!';
}

// Shorthand
const greetings = age < 18 ? 'You are not old enough' : 'You are young!';

21-短路评估速记

在将变量值分配给另一个变量时，可能要确保源变量不为null，未定义或为空。
可以编写带有多个条件的long if语句，也可以使用短路评估。

家好呀！今天小红书上来分享一篇关于友情链接HTML代码的教程，让我们一起来学习如何在网页上添加友情链接吧！

我们需要了解什么是友情链接。友情链接，顾名思义，就是在网页上相互分享链接，以增加网站之间的互相推荐和访问。通过添加友情链接，我们可以促进多个网站之间的互动和合作，共同提高网站的流量和知名度。

我们该如何在网页中添加友情链接呢？首先，我们需要使用HTML代码来实现这一功能。下面将给大家介绍一种简单的方法。

首先打开你要添加友情链接的网页，然后找到你想要添加友情链接的位置。通常，我们将这些链接放置在页面底部的“友情链接”或“合作伙伴”栏目中比较合适。

我们需要在HTML代码中插入一个“”标签，表示一个无序列表。在这个列表中，每一个链接都将被表示为一个“”标签，这样我们就可以依次添加多个链接了。

下面是一个示例代码，供大家参考：

在线咨询

上一篇：如何快速学习 Java 系列之跨域（CORS）请求（
下一篇：「就业」上海商学院招聘45名工作人员，3月11日前报

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商