向从api响应获得的字符串中添加其他字符

Question

我正在获得以下形式的api响应

mobile : [ { resolution:"S240p" , url:"Sample_url1"} , { resolution:"M360p" , url:"Sample_url2"} ,
{ resolution:"HD720p" , url:"Sample_url3"}] 

但是从前端我需要将其显示为S：240p，而不只是S240p，下面是React中的代码，有什么方法可以从前端实现。

Mobile.js

isMobile ? dpi_url && 
    dpi_url.mobile.map((value, index) => (
       <Link
            download
            onClick={this.downloadModal}
            href={value.url}
         >                         
         <div className="url_name" key={index}>
            {value.resolution}
         </div>
      </Link>                           
    ))
 : null

预期结果应该是S：240p，但我正在获取S240p

Answer 1

let mobile = [ { resolution:"S240p" , url:"Sample_url1"} , { resolution:"M360p" , url:"Sample_url2"} ,
{ resolution:"HD720p" , url:"Sample_url3"}] 

let formatted = mobile.map(value => { const sep = isNaN(parseInt(value.resolution[1])) ? `${value.resolution[1]}:` : `:${value.resolution[1]}`;return `${value.resolution[0]}${sep}${value.resolution.substring(2,value.resolution.length)}`})


console.log(formatted)

Answer 2

您可以使用str.search和regex查找第一个数字的索引，然后使用substr方法根据需要分割字符串：

const digitIndex = value.resolution.search(/\d/);
const formattedResolution = value.resolution.substr(0,digitIndex)+": "+value.resolution.substr(digitIndex);

然后显示它：

<div className="url_name" key={index}>
            {formattedResolution}
 </div>