JavaScript 中可变长度字符串的屏蔽

Question

我想在 ReactJS 中屏蔽一个字符串，例如用 * 符号替换前 N 个字符。但我希望 N 可变。

示例：

const item = '1234567890'
const masked = masked(item, 6);
console.log(masked); // '******7890'

Answer 1

如果我没听错，你可以试试这个：

const item = '1234588567890';

// How many letters you want to leave readable at the end
const cutoff = 4;
const formattedItem = '*'.repeat(item.length - cutoff) + item.slice(-cutoff);

console.log(formattedItem)

Answer 2

要屏蔽带有符号的字符串的前N个字符，你会需要 3 种成分：

字符串的长度
要屏蔽（隐藏）的第一个字符的整数计数 N
计算 (a) 屏蔽部分，(b) 显示部分的长度
一个屏蔽符号（通常是单个字符）

一个可重用的函数会这样实现：

function masked(str, n) {
    var maskingSymbol = '*';  // could make this a parameter

     // n might be longer than string
    var lengthToMask = Math.min(str.length, n);
    var lengthToShow = Math.max(0, str.length-n)

    // build parts    
    var maskedPart = ''
    if (lengthToMask > 0) { // repeat count must be positive
         maskedPart= maskingSymbol.repeat(lengthToMask);
    }
    var shownPart = '';
    if (lengthToShow > 0) { // slice count must be non zero
         shownPart =  str.slice(-lengthToShow);
    }
    
    return maskedPart + shownPart;
}

const item = '1234567890'
const maskedItem = masked(item, 6);

console.log(maskedItem); // '******7890'

// further tests for edge-cases
console.log("N = 0", masked(item, 0)); // '1234567890'
console.log("N = 9", masked(item, 9)); // '*********0'
console.log("N = 10", masked(item, 10)); // '**********'
console.log("N = 11", masked(item, 11)); // max 10 masked: '**********'
console.log("N = -1", masked(item, -1)); // negative not implemented, so nothing masked: '1234567890'

处理变量输入的稳健性

我还使其坚固耐用：

小于掩码计数的字符串 N
负掩蔽计数，如 N = -1。目前没有效果。

扩展点

negative masking-count N 可能会屏蔽尾随字符。所以它屏蔽了 最后 N 个字符
masking-symbol（单个字符）可以作为参数传入
甚至：掩码符号也可以跨越多个字符，例如 `/'

JavaScript 中可变长度字符串的屏蔽

Masking of variable length string in JavaScript

javascript

masking

处理变量输入的稳健性

扩展点