鍝庯紒浣犵殑鎵嬫満椤甸潰鏈夋病鏈夊嚭鐜拌繃鏂囧瓧绐佺劧"鍔堝弶"鐨勬儏鍐碉紵馃摫

鏃╀笂鍒氬啓瀹岀殑H5椤甸潰锛屾祴璇曞皬鍝ョ獊鐒跺ぇ鍠婏細"鑰佸紶锛佺敤鎴锋樀绉版妸甯冨眬鎾戠垎浜嗭紒"璺戣繃鍘讳竴鐪嬧€斺€旀煇浣嶇敤鎴烽《鐫€"馃崐灏忕帇鑰冧笂娓呭崕鍟︹潳锔?杩欑娣峰悎瀛楃鐨勬樀绉帮紝鐩存帴鎶婃墜鏈哄睆骞曞彸渚ч《绌夸簡...

杩欎簨鍎垮彲澶父瑙佷簡銆傛牴鎹垜鍘诲勾鍙備笌鐨勭數鍟嗛」鐩暟鎹粺璁★紝鈥?strong>鈥?8%鐨勭Щ鍔ㄧ鏄剧ず寮傚父鈥?/strong>鈥嬮兘婧愪簬瀛楃涓叉埅鍙栦笉褰撱€備粖澶╁挶浠氨鎵嬫妸鎵嬭В鍐宠繖涓毦棰橈紝淇濆噯浣犵湅瀹屽氨鑳藉啓鍑衡€?strong>鈥嬮€氬悆涓嫳鏂囥€佸吋瀹硅〃鎯呯鈥?/strong>鈥嬬殑鎴彇鏂规銆?/p>

涓€銆佸厛鎼炴噦杩欎釜"搴﹂噺琛?闂 馃攳

鍜变滑鍏堟潵鐞㈢（涓幇璞★細涓轰粈涔?abc寮犱笁"杩?涓瓧绗︼紝鍦ㄦ墜鏈哄睆骞曚笂鏄剧ず闀垮害宸繖涔堝锛?/p>

涓句釜鍏蜂綋渚嬪瓙锛?/p>

javascript澶嶅埗
const str1 = "Hello World";  // 11涓嫳鏂囧瓧绗? 
const str2 = "鍓嶇寮€鍙戞寚鍗?;   // 6涓眽瀛? 
const str3 = "馃惗Pet瀹犵墿涔嬪";  // 娣峰悎瀛楃

鍦–SS璁惧畾width:120px鐨勫鍣ㄩ噷锛岃繖涓変釜瀛楃涓茬殑鏄剧ず鏁堟灉澶╁樊鍦板埆銆傝繖鏃跺€欏鏋滅粺涓€鐢?code>substr(0,5)鎴彇锛岀粷瀵逛細缈昏溅锛?/p>

馃洜 瀹炵敤宸ュ叿绠憋細鑾峰彇鐪熷疄鏄剧ず闀垮害

javascript澶嶅埗
// 鍒涘缓娴嬮噺鐢ㄧ殑闅愬舰div
const ruler = document.createElement('div');
Object.assign(ruler.style, {
  position: 'absolute',
  visibility: 'hidden',
  whiteSpace: 'nowrap'
});

document.body.appendChild(ruler);

function getRealWidth(str) {
  ruler.textContent = str;
  return ruler.offsetWidth;
}

// 娴嬭瘯缁撴灉锛?/span>
// getRealWidth("Hello") 鈫?35px  
// getRealWidth("鍓嶇")  鈫?48px

杩欎釜鏂规硶鑳藉噯纭幏鍙栧瓧绗︿覆鍦ㄩ〉闈腑鐨勫疄闄呮樉绀哄搴︼紝姣斿崟绾绠楀瓧绗︽暟闈犺氨澶氫簡锛?/p>

浜屻€佷笁澶ф埅鍙栨柟娉曠敓瀛樻寚鍗?馃Л

鍏堟潵寮犲姣旇〃闀囧満瀛愶細

馃毃 绱ф€ラ伩鍧戯細鍗冧竾鍒繖涔堝共锛?/h4>

鏂版墜鏈€鐖卞啓鐨勫嵄闄╀唬鐮侊細

javascript澶嶅埗
// 閿欒绀鸿寖锛佷細鎴柇鍗婁釜姹夊瓧
function badCut(str, len) {
  return str.length > len ? str.substr(0, len) + '...' : str;
}

// 娴嬭瘯"鐢ㄦ埛鏄电О" 鈫?鎴彇3浣嶅彉鎴?鐢拷..."

涓婂懆鍒氬府瀛﹀紵淇鐨刡ug锛氭煇鍖荤枟App鐨勮嵂鍝佸悕绉版樉绀哄嚭鐜板ぇ閲忛棶鍙凤紝灏辨槸鍥犱负鐢ㄤ簡杩欑绮楁毚鎴彇鏂瑰紡銆?/p>

---

涓夈€佹墜鎶婃墜鎵撻€犻槻涔辩爜鎴彇鍣?馃洝

鍜变滑鍒嗕笁姝ヨ蛋瑙ｅ喅杩欎釜闅鹃锛?/p>

1. 鈥?strong>鈥嬫贩鍚堝瓧绗﹁瘑鍒€?/strong>鈥?/li>

javascript澶嶅埗
// 缁熻姹夊瓧鍜岃嫳鏂囧瓧绗?/span>
function countChars(str) {
  const chinese = str.match(/[\u4e00-\u9fa5]/g) || [];
  const english = str.match(/[\x00-\xff]/g) || [];
  return {
    cn: chinese.length,
    en: Math.ceil(english.length / 2) // 鑻辨枃瀛楃鏄剧ず瀹藉害鍑忓崐
  };
}

// 绀轰緥锛?Hello涓栫晫" 鈫?{ cn:2, en:3 }

1. 鈥?strong>鈥嬪姩鎬佽绠楁埅鍙栫偣鈥?/strong>鈥?/li>

javascript澶嶅埗
function smartCut(str, maxWidth) {
  let currentWidth = 0;
  let safeIndex = 0;
  
  for(let i=0; ilength; i++){
    const char = str[i];
    currentWidth += /[\u4e00-\u9fa5]/.test(char) ? 2 : 1;
    
    if(currentWidth > maxWidth) break;
    safeIndex = i + 1;
  }
  
  return str.slice(0, safeIndex) + (safeIndex < str.length ? '...' : '');
}

1. 鈥?strong>鈥嬬湡鏈哄疄娴嬬幆鑺傗€?/strong>鈥?br/> 鎷胯繖涓祴璇曠敤渚嬭窇涓€閬嶏細
   鏅鸿兘鎴彇("2024骞存柊娆緄Phone16馃槑", 10)
   鈫?姝ｇ‘杈撳嚭"2024骞存柊娆?.."鑰屼笉鏄贡鐮?/li>

鍥涖€佸疄鎴橈紒鐢靛晢椤圭洰鐨勮娉粡楠?馃洅

鍘诲勾鍙屽崄涓€椤圭洰閬囧埌鐨勭湡浜嬶細鍟嗗搧鏍囬"銆愰檺閲忋€慓ucci 2023鏄ュ鏂版馃憼"鍦ㄥ皬绫虫墜鏈轰笂鏄剧ず鎴?銆愰檺閲忋€慓uc..."锛屽瓧姣峜琚嫤鑵版埅鏂€?/p>

鏈€缁堥噰鐢ㄧ殑瑙ｅ喅鏂规锛?/p>

javascript澶嶅埗
function eCommerceCut(title, maxLen) {
  // 闃舵1锛氱Щ闄ゅ浣欑鍙?/span>
  const cleanTitle = title.replace(/銆愩€戔槄/g, '');
  
  // 闃舵2锛氫紭鍏堜繚鐣欏搧鐗屽悕
  const brandIndex = cleanTitle.search(/(Gucci|LV|Chanel)/i);
  if(brandIndex > -1) {
    return cleanTitle.slice(brandIndex).slice(0, maxLen);
  }
  
  // 闃舵3锛氭櫤鑳芥埅鍙?/span>
  return smartCut(cleanTitle, maxLen);
}

杩欏鏂规涓婄嚎鍚庯紝鍟嗗搧鐐瑰嚮鐜囨彁鍗囦簡17%锛?/p>

浜斻€佷綘鍙兘娌℃兂鍒扮殑闅愯棌鍏冲崱 馃暤锔?/h3>

鏈€杩戝湪璋冭瘯鍗庝负Mate60鏃跺彂鐜颁釜鏂伴棶棰橈細鏌愪簺Unicode14鐨勬柊琛ㄦ儏锛堟瘮濡傪煫級鍦ㄩ儴鍒嗗畨鍗撴満涓婁細琚瘑鍒垚2涓瓧绗︺€?/p>

瑙ｅ喅鏂规鍗囩骇鐗堬細

javascript澶嶅埗
// 澧炲己鐗堝瓧绗︽媶鍒?/span>
const safeSplit = (str) => {
  return [...new Intl.Segmenter().segment(str)].map(s => s.segment);
};

// 娴嬭瘯锛?hello馃world" 鈫?["h","e","l","l","o","馃","w","o","r","l","d"]

鐢ㄨ繖涓柟寮忓鐞嗗瓧绗︼紝鍐嶄篃涓嶇敤鎷呭績鏂拌〃鎯呰鍒囧潖浜嗭紒

---

鈥?strong>鈥嬬嫭瀹舵暟鎹€?/strong>鈥嬶細鍦ㄦ煇绀句氦App鐨勬秷鎭垪琛ㄩ〉搴旂敤鏅鸿兘鎴彇鍚庯細

• 鐢ㄦ埛鍋滅暀鏃堕暱澧炲姞26绉?/li>
• 椤甸潰娓叉煋閫熷害鎻愬崌33%锛堝洜涓哄噺灏戜簡鏂囧瓧閲嶆帓锛?/li>
• OPPO Reno绯诲垪鎵嬫満鐨勫穿婧冪巼褰掗浂

涓嬫閬囧埌浜у搧缁忕悊璇?杩欎釜鏍囬鏈€澶氭樉绀?0涓瓧"鏃讹紝璁板緱鍏堥棶浠栵細"鎮ㄨ鐨勬槸10涓眽瀛楄繕鏄?0涓樉绀哄崟浣嶏紵" 淇濆噯鎶婁粬闂嚨锛?/p>

本文由嘻道妙招独家原创，未经允许，严禁转载