文首發自「慕課網」，想了解更多IT干貨內容，程序員圈內熱聞，歡迎關注！

作者|慕課網精英講師 然冬

算術運算符以數值（字面量或變量）作為其操作數，并返回一個單個數值。標準算術運算符是加法（+），減法（ - ），乘法（*）和除法（/）。—— MDN

算數運算符是用來做算數運算的，如 + 這個符號，就是用來做加法操作。

1. N元運算

N 代表一個數，如一元運算，二元運算。

N元運算 表示由N個值產生一個新的值的規則。

如 * 就是一個二元運算符，他由兩個數相乘產生第三個數。

JavaScript 中有三元運算符、二元運算符、一元運算符。

注意：網絡上可以搜索到 JavaScript 中有更多元的運算，基本上都是使用三目（元）表達式嵌套來完成的，嚴格上說這不屬于更多元的運算。

與算數相關的只有二元與一元運算符：

二元運算符：

• + 加法
• - 減法
• * 乘法
• / 除法
• % 求余
• ** 冪 （ES2016 提案）

一元運算符：

• + 一元正號
• - 一元負號
• ++ 遞增
• -- 遞減

2. 二元運算符

2.1 加法（+）

加法用來做求和，將 + 左右兩邊的數值相加，也可以用來連接字符串。

var num1=2;
var num2=3;

var total=num1 + num2;
console.log(total); // 輸出：5

var firstName='hello';
var lastName='world';

var name=firstName + ' ' + lastName;
console.log(name); // 輸出："hello world"
代碼塊1234567891011

數字的加法就是和自然數學里的加法一樣，做累加操作。

+ 碰到字符串就會把兩邊字符連接到一起，形成一個新的字符串。

2.2 減法（-）

減法操作是將 - 左邊的數減去 - 右邊的數，結果就是差值。

var totalApple=10; // 一共有10個蘋果
var take=4; // 小明拿走了四個蘋果

var left=totalApple - take; // 還有 10 - 4 個蘋果

console.log(left); // 輸出：6
代碼塊123456

2.3 乘法（*）

乘法操作將 * 左右兩邊的數相乘，結果就是積。

var result=5 * 6;

console.log(result); // 輸出：30
代碼塊123

2.4 除法（/）

除法操作將 / 左邊的數作為被除數，右邊的數作為除數，最后求出結果。

var result=6 / 2;

console.log(result); // 輸出：3
代碼塊123

在許多強類型的語言中，整數相除即便無法除盡，結果必然是整數，但在 JavaScript 中，整數相除如果無法除盡，也會返回小數部分。

console.log(2 / 5); // 輸出：0.4
代碼塊1

上面這個結果在 Java 中會返回 0，但是在 JavaScript 中會反回 0.4。

注意：如果拿正負 0 作為除數，則結果會返回 Infinity 與 -Infinity。

2.5 求余（%）

求余事實上就是取模運算，也就是取余數。如 8 對 3 取模，結果為 2，按小學數學中的說法就是 8 除 3 得 2余2，余2就是結果。

var result=8 % 3;

console.log(result); // 輸出：2
代碼塊123

2.6 冪（**）

冪是 ES2016 提供的新運算符，用來做乘方運算。

** 左邊是底數，右邊是指數，如 2 ** 3 按數學中的表示就是 23，即求 2 的 3 次方。

var total=2 ** 3; // 2 的 3次方，結果為 2 * 2 * 2 ，即8

console.log(total); // 輸出：8
代碼塊123

在 JavaScript 中的冪運算與其他語言有些許區別，規范中指出禁止使用帶有歧義的冪運算表達式。

如底數前不能跟隨一元運算符。

console.log(-8 ** 2); // 在JavaScript會報錯
代碼塊1

以上冪運算是會報錯的，因為 JavaScript 無法知道是要在計算完 8 的 2 次方后求反，還是計算 -8 的 2 次方。

使用括號可以提供具體的意義，消除歧義：

console.log((-8) ** 2); // -8的2次方

console.log(-(8 ** 2)); // 計算完8的2次方后求反
代碼塊123

3. 一元運算符

3.1 一元正號

一元正號通常不參與數學運算，而是用作類型轉換，一元正號可以很方便的將其他類型轉換成數字。

var num1=+3;
var num2=+'3';
var num3=+true;
var num4=+false;
var num5=+null;
var timestamp=+new Date(); // 直接得到時間戳
代碼塊123456

3.2 一元負號

一元負號也可以將其他類型的數據轉換成數字，但是轉換完后會在前面加上負號。

var num1=-3;
var num2=-'3';
var num3=-true;
var num4=-false;
var num5=-null;
var timestamp=-new Date();
代碼塊123456

通常比較多的使用場景是對數字取反，讓數值在正負值切換。

3.3 遞增

遞增操作會讓數值本身增加 1。

var num=0;

num++;

console.log(num); // 輸出：1

num++;

console.log(num); // 輸出：2
代碼塊123456789

這樣看，遞增操作有點像x=x + 1這種操作，其實只有在后置使用時的效果是和x=x + 1一樣的，也就是++x。

前置使用的時候，會先做遞增操作，再返回數值。

后置使用時候，會先返回數值，再做遞增操作。

var num=0;

var total=1 + (num++);

console.log(total, num); // 輸出：1 1
代碼塊12345

這個是前置使用的情況，可以看到 num 的值是 1，total 的值也是 1，也就是說 total 再累加的時候為（1 + 0），這個時候 num 的值為 0，再這個值返回后對 num 進行了遞增，所以輸出 num 結果為 1。

var num=0;

var total=1 + (++num);

console.log(total, num); // 輸出：2 1
代碼塊12345

這個是后置使用的情況，total 輸出結果為 2，在求和的時候就是(1 + 2)，num 是在遞增后再被使用的。

3.4 遞減

遞增操作會讓數值本身減去 1。

與遞增一樣，遞減也具有前置使用與后置使用的情況。

var num=1;
var total=1 + (num--);

console.log(total); // 輸出：2

var num2=1;
var total2=1 + (--num);

console.log(total2); // 輸出：0
代碼塊123456789

4. 優先級

算術符的優先級與自然數學中的相似，按照先乘除后加減的規則來，具體的可以參考下表：

括號 > 后置遞增/后置遞減 > 一元加法/一元減法/前置遞增/前置遞減 > 冪 > 乘法/除法/取模 > 加法/減法

可以見到，括號的優先級是最高的，所以建議在自己不確定優先級的時候，盡量使用括號決定優先級。

如：

var res=1 + 2 / 3 * 4 % 5 ** 7;
代碼塊1

上面這個表達式的運算順序，即便是知道優先級，也不是一眼就能看出來的，所以建議即便是知道優先級，也使用括號將計算順序做區分。

將想要的計算順序用括號包裹后：

var res=1 + (((2 / 3) * 4) % (5 ** 7));
代碼塊1

4. 小結

算數運算符主要參與運算，N 元運算就是用 N 個值產生一個新的值，運算符有自己的特性和優先級，當表達式較長的時候，建議使用括號包裹來控制執行順序。

歡迎關注「慕課網」，發現更多IT圈優質內容，分享干貨知識，幫助你成為更好的程序員！

一陣做需求時，有個小功能實現起來廢了點腦細胞，覺得可以記錄一下。

產品的具體訴求是：用戶點擊按鈕進入詳情頁面，詳情頁內的卡片標題內容過長時，標題的前后兩端正常展示，中間用省略號...表示，并且鼠標懸浮后，展示全部內容。

關于鼠標懸浮展示全部內容的代碼就不放在這里了，本文主要寫關于實現中間省略號...的代碼。

實現思路

1. 獲取標題盒子的真實寬度, 我這里用的是clientWidth；
2. 獲取文本內容所占的實際寬度；
3. 根據文字的大小計算出每個文字所占的寬度；
4. 判斷文本內容的實際寬度是否超出了標題盒子的寬度；
5. 通過文字所占的寬度累加之和與標題盒子的寬度做對比，計算出要截取位置的索引；
6. 同理，文本尾部的內容需要翻轉一下，然后計算索引，截取完之后再翻轉回來；

代碼

html代碼

<div class="title" id="test">近日，銀行紛紛下調大額存單利率，但銀行定期存款仍被瘋搶。銀行理財經理表示：有意向購買定期存款要盡快，不確定利率是否會再降。</div>

css代碼: 設置文本不換行，同時設置overflow:hidden讓文本溢出盒子隱藏

.title {
    width: 640px;
    height: 40px;
    line-height: 40px;
    font-size: 14px;
    color: #00b388;
    border: 1px solid #ddd;
    overflow: hidden;
    /* text-overflow: ellipsis; */
    white-space: nowrap;
    /* box-sizing: border-box; */
    padding: 0 10px;
}

javascript代碼：

獲取標題盒子的寬度時要注意,如果在css樣式代碼中設置了padding, 就需要獲取標題盒子的左右padding值。 通過getComputedStyle屬性獲取到所有的css樣式屬性對應的值, 由于獲取的padding值都是帶具體像素單位的，比如: px，可以用parseInt特殊處理一下。

獲取盒子的寬度的代碼，我當時開發時是用canvas計算的，但計算的效果不太理想，后來逛社區，發現了嘉琪coder大佬分享的文章，我這里就直接把代碼搬過來用吧, 想了解的掘友可以直接滑到文章末尾查看。

判斷文本內容是否超出標題盒子

 // 標題盒子dom
const dom=document.getElementById('test');

// 獲取dom元素的padding值
function getPadding(el) {
    const domCss=window.getComputedStyle(el, null);
    const pl=Number.parseInt(domCss.paddingLeft, 10) || 0;
    const pr=Number.parseInt(domCss.paddingRight, 10) || 0;
    console.log('padding-left:', pl, 'padding-right:', pr);
    return {
        left: pl,
        right: pr
    }
}
// 檢測dom元素的寬度，
function checkLength(dom) {
     // 創建一個 Range 對象
    const range=document.createRange();
    
    // 設置選中文本的起始和結束位置
    range.setStart(dom, 0),
    range.setEnd(dom, dom.childNodes.length);
    
    // 獲取元素在文檔中的位置和大小信息,這里直接獲取的元素的寬度
    let rangeWidth=range.getBoundingClientRect().width;
    
    // 獲取的寬度一般都會有多位小數點，判斷如果小于0.001的就直接舍掉
    const offsetWidth=rangeWidth - Math.floor(rangeWidth);
    if (offsetWidth < 0.001) {
        rangeWidth=Math.floor(rangeWidth);
    }
    
    // 獲取元素padding值
    const { left, right }=getPadding(dom);
    const paddingWidth=left + right;
    
    // status：文本內容是否超出標題盒子；
    // width: 標題盒子真實能夠容納文本內容的寬度
    return {
        status: paddingWidth + rangeWidth > dom.clientWidth,
        width: dom.clientWidth - paddingWidth
    };
}

通過charCodeAt返回指定位置的字符的Unicode編碼, 返回的值對應ASCII碼表對應的值，0-127包含了常用的英文、數字、符號等，這些都是占一個字節長度的字符，而大于127的為占兩個字節長度的字符。

截取和計算文本長度

js// 計算文本長度，當長度之和大于等于dom元素的寬度后，返回當前文字所在的索引，截取時會用到。
function calcTextLength(text, width) {
    let realLength=0;
    let index=0;
    for (let i=0; i < text.length; i++) {
        charCode=text.charCodeAt(i);
        if (charCode >=0 && charCode <=128) {
            realLength +=1;
        } else {
            realLength +=2 * 14; // 14是字體大小
        }
        // 判斷長度，為true時終止循環，記錄索引并返回
        if (realLength >=width) {
            index=i;
            break;
        }
    }
    return index;
}

// 設置文本內容
function setTextContent(text) {
    const { status, width }=checkLength(dom);
    let str='';
    if (status) {
        // 翻轉文本
        let reverseStr=text.split('').reverse().join('');
        
        // 計算左右兩邊文本要截取的字符索引
        const leftTextIndex=calcTextLength(text, width);
        const rightTextIndex=calcTextLength(reverseStr, width);
        
        // 將右側字符先截取，后翻轉
        reverseStr=reverseStr.substring(0, rightTextIndex);
        reverseStr=reverseStr.split('').reverse().join('');
        
        // 字符拼接
        str=`${text.substring(0, leftTextIndex)}...${reverseStr}`;
    } else {
        str=text;
    }
    dom.innerHTML=str;
}

最終實現的效果如下：

上面就是此功能的所有代碼了，如果想要在本地試驗的話，可以在本地新建一個html文件，復制上面代碼就可以了。

下面記錄下從社區內學到的相關知識：

1. js判斷文字被溢出隱藏的幾種方法;
2. JS獲取字符串長度的幾種常用方法，漢字算兩個字節;

1、 js判斷文字被溢出隱藏的幾種方法

1. Element-plus這個UI框架中的表格組件實現的方案。

通過document.createRange和document.getBoundingClientRect()這兩個方法實現的。也就是我上面代碼中實現的checkLength方法。

2. 創建一個隱藏的div模擬實際寬度

通過創建一個不會在頁面顯示出來的dom元素，然后把文本內容設置進去，真實的文本長度與標題盒子比較寬度，判斷是否被溢出隱藏了。

function getDomDivWidth(dom) {
    const elementWidth=dom.clientWidth;
    const tempElement=document.createElement('div');
    const style=window.getComputedStyle(dom, null)
    const { left, right }=getPadding(dom); // 這里我寫的有點重復了，可以優化
    tempElement.style.cssText=`
        position: absolute;
        top: -9999px;
        left: -9999px;
        white-space: nowrap;
        padding-left:${style.paddingLeft};
        padding-right:${style.paddingRight};
        font-size: ${style.fontSize};
        font-family: ${style.fontFamily};
        font-weight: ${style.fontWeight};
        letter-spacing: ${style.letterSpacing};
    `;
    tempElement.textContent=dom.textContent;
    document.body.appendChild(tempElement);
    const obj={
        status: tempElement.clientWidth + right + left > elementWidth,
        width: elementWidth - left - right
    }
    document.body.removeChild(tempElement);
    return obj;
}

3. 創建一個block元素來包裹inline元素

這種方法是在UI框架acro design vue中實現的。外層套一個塊級(block)元素，內部是一個行內(inline)元素。給外層元素設置溢出隱藏的樣式屬性，不對內層元素做處理，這樣內層元素的寬度是不變的。因此，通過獲取內層元素的寬度和外層元素的寬度作比較，就可以判斷出文本是否被溢出隱藏了。

// html代碼
<div class="title" id="test">
    <span class="content">近日，銀行紛紛下調大額存單利率，但銀行定期存款仍被瘋搶。銀行理財經理表示：有意向購買定期存款要盡快，不確定利率是否會再降。</span>
</div>

// 創建一個block元素來包裹inline元素
const content=document.querySelector('.content');
function getBlockDomWidth(dom) {
    const { left, right }=getPadding(dom);
    console.log(dom.clientWidth, content.clientWidth)
    const obj={ 
        status: dom.clientWidth < content.clientWidth + left + right,
        width: dom.clientWidth - left - right
    }
    return obj;
}

4. 使用canvas中的measureText方法和TextMetrics對象來獲取元素的寬度

通過Canvas 2D渲染上下文(context)可以調用measureText方法，此方法會返回TextMetrics對象，該對象的width屬性值就是字符占據的寬度，由此也能獲取到文本的真實寬度，此方法有弊端，比如說兼容性，精確度等等。

// 獲取文本長度
function getTextWidth(text, font=14) {
    const canvas=document.createElement("canvas");
    const context=canvas.getContext("2d")
    context.font=font
    const metrics=context.measureText(text);
    return metrics.width
}

2、JS獲取字符串長度的幾種常用方法

1. 通過charCodeAt判斷字符編碼

通過charCodeAt獲取指定位置字符的Unicode編碼，返回的值對應ASCII碼表對應的值，0-127包含了常用的英文、數字、符號等，這些都是占一個字節長度的字符，而大于127的為占兩個字節長度的字符。

function calcTextLength(text) {
    let realLength=0;
    for (let i=0; i < text.length; i++) {
        charCode=text.charCodeAt(i);
        if (charCode >=0 && charCode <=128) {
            realLength +=1;
        } else {
            realLength +=2;
        }
    }
    return realLength;
}

2. 采取將雙字節字符替換成"aa"的做法，取長度

function getTextWidth(text) {
    return text.replace(/[^\x00-\xff]/g,"aa").length;
};

作者：娜個小部呀
鏈接：https://juejin.cn/post/7329967013923962895

天學習下css3的基礎選擇器類型，只有使用選擇器選中了元素，才可把樣式應用于元素上，所以選擇器對我們來說是至關重要的。選擇器允許開發者根據元素的類型、類名、ID等屬性來選擇性地應用樣式。

下面是一個包含HTML和CSS代碼的例子，展示了CSS3中的幾種基礎選擇器如何工作

<!DOCTYPE html>  
<html lang="en">  
<head>  
<meta charset="UTF-8">  
<meta name="viewport" content="width=device-width, initial-scale=1.0">  
<title>CSS3 基礎選擇器示例</title>  
<style>  
    /* 元素選擇器 */  
    p {  
        color: blue;  
    }  
  
    /* 類選擇器 */  
    .highlight {  
        background-color: yellow;  
    }  
  
    /* ID選擇器 */  
    #unique-id {  
        color: red;  
    }  
  
    /* 后代選擇器 */  
    div p {  
        font-style: italic;  
    }  
  
    /* 子選擇器 */  
    ul > li {  
        list-style-type: none;  
    }  
  
    /* 相鄰兄弟選擇器 */  
    h1 + p {  
        font-size: 18px;  
    }  
  
    /* 通用兄弟選擇器 */  
    h1 ~ p {  
        margin-top: 20px;  
    }  
</style>  
</head>  
<body>  
  
<p>這是一個普通的段落，應用了元素選擇器。</p>  
  
<p class="highlight">這是一個高亮顯示的段落，應用了類選擇器。</p>  
  
<div id="unique-id">這是一個ID為unique-id的div，它的文本應用了ID選擇器。</div>  
  
<div>  
    <p>這個段落位于div內部，應用了后代選擇器。</p>  
</div>  
  
<ul>  
    <li>列表項1，應用了子選擇器。</li>  
    <li>列表項2，也應用了子選擇器。</li>  
</ul>  
  
<h1>標題</h1>  
<p>這個段落緊接在h1之后，應用了相鄰兄弟選擇器。</p>  
<p>這個段落也在h1之后，但由于不是緊接的，所以只應用了通用兄弟選擇器的樣式。</p>  
  
</body>  
</html>

在這個例子中，我們有一個HTML文檔，其中包含了各種元素，并且針對這些元素使用了CSS3中的基礎選擇器來應用樣式。

• 元素選擇器：所有的<p>元素都會應用藍色文本顏色。
• 類選擇器：具有class="highlight"的<p>元素會有黃色背景。
• ID選擇器：ID為unique-id的<div>元素內的文本會變成紅色。
• 后代選擇器：位于<div>內部的<p>元素會以斜體顯示。
• 子選擇器：<ul>元素的直接子<li>元素將不會有列表樣式（即無圓點或數字）。
• 相鄰兄弟選擇器：緊接在<h1>之后的<p>元素會有18px的字體大小。
• 通用兄弟選擇器：所有在<h1>之后的<p>元素都會有20px的頂部外邊距，但由于相鄰兄弟選擇器更具體，緊接在<h1>之后的<p>還會受到它的影響（這里兩個選擇器都作用于相同的元素，但樣式會累加或根據CSS的層疊規則來應用）。不過，在這個特定的例子中，字體大小只由相鄰兄弟選擇器設置，頂部外邊距則由通用兄弟選擇器設置。